CSS ile yazıya gölge vermek (text-shadow) nasıl yapılır?

Metinlere gölge vermek, sitelerde görsellik açısından tasarımcıların sık sık tercih ettikleri yöntemdir. Genelde bu durumlarda gölge verilen alanlar resim siteye eklenir. Bu durum kodlama ve arama motorları için mantıklı değildir. Ayrıca resim dosyaları metinlere göre daha fazla boyuta sahip oldukları için dezavantajlıdır.

Bunun için CSS 3 ile text-shadow özelliği standartlara eklenmiştir.

text-shadow

Bu özellik bir element içindeki metne bir veya daha fazla gölge vermek için kullanılmaktadır.

text-shadow değeri 4 kısımdan oluşur. Bir örnek açıklayacak olursak;

.uzmanim { 
    text-shadow: 2px 2px 1px #ddd; 
}

2px; İlk değer yataydaki mesafe içindir Artı değerler metnin sağından itibaren uzaklık değeridir, negatif değerler ise metnin soluna doğru mesafeyi göstermektedir.

2px; İkinci değer dikeydeki mesafe içindir. Artı değerler metnin altına doğru mesafeyi gösterir, eksi değerler ise metnin üstüne doğru mesafesini göstermektedir.

1px; Bulanıklık(blur) değeridir. Gölgelerin gerçeğe yaklaşması için kullanılır. Bulanık yatay ve dikey için verilen değerlere göre şekil almaktadır.

#ddd; renk değeri. Gölgenin renk değerini göstermektedir.

Birden fazla gölge kullanımı

text-shadow ile birden fazla gölge tanımı yapılabilmektedir. Aralarında virgül kullanarak birden fazla gölge tanımı yapabilirsiniz. Burada dikkat etmemiz gereken en önemli nokta gölgelerin kullanımında üst üste binmesi durumunda normal sıralamada sonda olan üstte önceden tanımlananlar altta kalıcaktır.

Bir örnek açıklayacak olursak;

.uzmanim {
    text-shadow: 1px 1px 2px #0000ff, 1px 1px 2px #ff0000; 
}

bu örnekte #0000ff renk kodu ile verilen mavi gölge önce #ff0000 renk kodu ile verilen kırmızı gölge daha sonra onun üstüne gelecektir.

Tarayıcı uyumluluğu konusunda ise İnternet Explorer (ie6, ie7, ie8, ie9) desteği bulunmamaktadır.

İnternet Explorer için Gölge Sorununun Çözümü

İnternet explorer için sorunu "filter" bize yardımcı olacaktır. text-shadow özelliği kadar iyi sonuçlar vermese de bazı durumlar için bize çözüm sunmaktadır.

Bir örnek açıklayacak olursak;

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=45, Color='#cccccc');
 

Tüm tarayıcılar için bir kod yazıcak olursak;

.uzmanim { 
    -moz-text-shadow: 2px 2px 1px #ddd; /* FF */
    -webkit-text-shadow: 2px 2px 1px #ddd; /* Safari, Chrome */
    text-shadow: 2px 2px 1px #ddd;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=45, Color='#cccccc'); /* IE7, IE9 */ 
}