CSS3 ile gölge efekti – text-shadow –

Eskiden web sayfalarımıza bir yazıya, resme … hoş bir görünüm kazandırmak için resim düzenleme programlarına başvuruyorduk. En basitinden gölge efekti vermek için bunu yapıyorduk. Şimdi ise bunları sadece CSS kullanarak yapmak mümkün.

CSS3 ile gelen text-shadow yani metin gölgelendirme özelliğini bir denedim.  Eğer Firefox 3.1 ya da Opera 9.5 veya Safari 3.1 ve üstü gibi bu özelliği destekleyen bir web tarayıcısı kullanmıyorsanız benimde başlıklarımda kullandığım bu özelliğin nasıl bir şey olduğunu farkedemeyebilirsiniz.  Ama sorun değil aşağıdaki video sizler için.

Önce text-shadow’ u nasıl kullanabilceğimize dair bahsetmek isterim.

Öncelikle bu özelliği hangi metinlere uygulamak istediğinize karar verin. Örneğin başlığa uygulamak istiyoruz. Başlığımızın sitilinide <h2> kodu ile belirlemişiz.

h2 {font-size: 2em; line-height: 1em; margin:0; }
h2 a {color: #900;}
h2 a:hover {color:red;}

diyelimki kodlarımız yukarıdaki gibi. Şimdi  text- shadow kodlarını ekleyelim.

h2 {font-size: 2em; line-height: 1em; margin:0;
text-shadow:black 2px 2px 8px;}
.entrytitle h2 a {color: #900;}
.entrytitle h2 a:hover {color:red;
text-shadow:3px 3px 8px orange;}

Ben yukarıda bir normal görünüm birde üzerine gelince değişen olmak üzere iki kez ekledim. Nasıl yapmak istediğiniz size kalmış. Yalnız yazı metinlerinde gözü yoran cafcaflı gölgelendirme efektleri ile ziyaretçilerinize  Çin işkencesi yapmayın derim.

Kodların ne anlama geldiğine gelirsek:

text-shadow:3px 3px 8px orange;

text-shadow: X kordinatına göre kayma – Y kordinatına gör kayma – gölegenin keskinlik/bulanıklık derecesi – gölge rengi

— Gölge rengini başa da sonada koyabilirsiniz ancak diğerlerinin sırası önemlidir.

— X koodinatında pozitif değerler için  gölge sağa negatif değerler için (-2px , -6px, …gibi ) sola yönelir.

— Y koordinatında ise pozitif değerler için aşağı negatif değerler için yukarıya yönelir.

— Gölgenin merkezde olmsasını isterseniz px i yazmadan X ve Y için 0 (sıfır) yazmanız yeterlidir. Örnek:  text-shadow: 0 0 2px #FFCC00;

— Eğer gölge rengi için herhangi bir renk kodu yazmazsanız gölgeniz mevcut yazının renginde olur.

Çoklu gölge

Bir yazıya birden çok gölge verebilirsiniz.( En fazla kaç tane koyabiliriz tam emin değilim ama altıncıdan sonra çalıştığını görmedim.) Bunun için herbir gölgenin kodundan sonra araya virgül koymalısınız Örnek:

text-shadow:blue 0 0 8px,
red     12px -10px 4px,
green   6px  14px 4px;

Renk kodlarını ister blue, red, green şeklinde istersenizde #00FFCC gibi ekleyebilirsiniz. Biraz yaratıcılıkla ortaya çok hoş sonuçlar çıkarabilrsiniz.

Yalnız sitenizde bu gölge efektini kullanırken bunun bir çok tarayıcıda gözükmeyeceğini dikkate alın. Eğer Beyaz arkaplan üstüne beyaz bir yazıyı gölgeli olarak koyarsanız bu özelliği desteklemeyen tarayıcılara sahip ziyaretçileriniz onları göremez.

Metin sitilini önce eski tarayıcılar için ayarlayın sonra o sitiller için gölge efekti verin. Bu bana göre herbir tarayıcı ve tarayıcı sürümü için değişik kodlar kullanmaktan daha kolay.

Yaptığım bir kaç örneği içeren sayfa

Siteniz başka tarayıcılarda nasıl görünüyor?

Benzer Yazılar