Merhabalar. CSS kaynaklarını dolaşırken dikkatimi çok ilginç ve güzel bir şey çekti. Yazıların içine arkaplanlar gömülebiliyor ve gradient hissi yaratılabiliyor. Tabii bunu görünce hemen blogumda yazmak istedim ve çalışmalara başladım. Daha önce hiç kullanmadığım jQuery kütüphanesinden faydalanılarak hazırlanmış. Güzel bir yanıda nefret ettiğim IE6′da çalışabiliyor olması. Aşağıdan dosyalara ulaşabilirsiniz.

Daha fazla bilgiye ise Web Designer Wall dan ulaşabilirsiniz.

Nasıl Çalışıyor ?

Javascript’e veya flash’a ihtiyaç olmadan çalışıyor.

HTML kodlarımızla deneyelim

<h1><span></span>CSS Gradient Text</h1>

Şimdide CSS kodlarımızı yazalım.

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;
}

Şimdide jQuery kütüphanemizi ekleyelim.

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");

});
</script>

jQuery kütüphanemizi ekledikten sonra bir kaç örnek göstererek sizlere dosyayı vereceğim.

Örnekler :

-