CSS ile Yazı Üzerine Gradient Efekt Oluşturma

21 October 2008 Yazar; Mustafa BAL 2,105 Görüntülenme

Bu konuya internet üzerinde yabancı bir sitede rastladım Türkçe’ye cevirmek istedim.

Daha önceden gradient efektler için photoshop ve benzeri programlar kullanıyorduk ve sadece belli yazının üzerine veriyorduk gradient efekti, tabi ki bu kullanım amacına göre değişir.

CSS’de, photoshopta hazırladığımız transparan gradient efekti yazının üzerine basıyoruz ve x yönüne dogru repeat yaptığımızda yazı boyunca, yazı üzerine gradient efekt uygulanıyor.

Dosyaları indirmek için burayı tıklayın, Detaylı örnekler için ise burayı…

HTML
<h1><span></span>CSS Gradient Text</h1>
CSS
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; }

Bütün tarayıcılarda çalışmaktadır. yalnız IE6′da bildiğiniz gibi PNG transparan resimler desteklenmediği için sitenizin <head> tag’ının üst tarafına aşağıdaki PNG hack kodunu yerleştirmeniz gerekiyor.

<style> h1 span { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’); } </style>

Örnekler;

screenshot