Bir CSS makalesi yazdım ve ipuçlarını burada da paylaşmak isterim.






CSS Kodları
.taslak1 h1 {
font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 30px 0 50px;
color: #464646;
}
.taslak1 h1 span {
background: url(beyaz-gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
HTML Kodları
<div class="taslak1">
<h1><span></span>AdobeWordPress.com</h1>
</div>




CSS Kodları
.taslak2 {
background: #000;
padding: 30px 0 30px 30px;
margin: 30px 0 50px;
}

.taslak2 h1 {
font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 0;
color: #fff;
letter-spacing: -2px;
}

.taslak2 h1 span {
background: url(seritli-gradient.png) repeat-x;
position: absolute;
bottom: -0.1em;
display: block;
width: 100%;
height: 29px;
}
HTML Kodları
<div class="taslak2">
<h1><span></span>ŞERİTLİ GRADIENT</h1>
</div>





CSS Kodları
[CODE].taslak3 {

background-color: #000;
padding: 30px 0 30px 30px;
margin: 30px 0 50px;
}

.taslak3 h1 {
font: normal 340%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 0;
color: #fff;
}

.taslak3 span {
background: url(koyu-gradient.png) repeat-x;
position: absolute;
bottom: -0.1em;
display: block;
width: 100%;
height: 29px;
}/CODE]

HTML Kodları
<div class="taslak3">
<h1><span></span>Metal Gradient</h1>
</div>
Kaynak : http://www.adobewordpress.com/css-il...adient-efekti/

Tarafımızdan hazırlanmıştır. İzinsiz kopyalanamaz.