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ı

AdobeWordPress.com





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ı

ŞERİTLİ GRADIENT






CSS Kodları
.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ı
[CODE]

Metal Gradient

Kaynak : http://www.adobewordpress.com/css-ile-yazilara-gradient-efekti/

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