Home » Archive

İçerisinde gradient yazı efekti Etiketi Geçen Yazılar

Tasarım »

[18 Aug 2008 | Yorum Yok | ]

Photoshop ile yaptığımız bu efekti css ile yapabileceğinizi biliyor muydunuz? Artık biliyorsunuz Aşağıda verdiğim kodları sitenize uygulayarak, yolunu gösterdiğiniz yazılar aynen photoshopta uyguladığımız gibi gradient text efektine maruz kalıyor. Gayet güzel bir kod bence. Sitelerin görselliğini arttırabilir ve kullanıcılarınızın göz zevkine hitap edebilirsiniz.
<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid XImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>

<![endif]–>