Metinlere gölge vermek, site görselliği açısından her zaman tasarımcıların tercih ettiği yöntemlerden birisidir. Bir çok sitede bu durum ile karşılaşırız. Normalde bu gibi durumlarda gölge verilen alanlar resim olarak kesilip siteye eklenir. Bu durum anlamlı kodlama ve arama motorları için pek mantıklı değildir, ayrıca resim dosyaları metne göre daha fazla boyuta sahip olması nedeni ile de dezavantajlıdır.
Bunun için text-shadow özelliği standartlara eklendi. CSS 2 ile birlikte gelen text-shadow özelliği daha sonra CSS 2.1’da kaldırıldı. Daha sonra CSS 3 ile birlikte tekrar geldi. Safari bu özelliği ilk sürümünden itibaren desteklerken aynı şeyi diğer tarayıcılar için söylemek zor. text-shadow özelliği ile görsel düzenleme programlarında(photoshop, fireworks) kullanılan gölgeye yakın sonuçlar elde edebiliriz.
Öncelikle text-shadow’un yapısını bir inceleyelim. text-shadow maximum 4 değer almaktadır. Bu değerlerden bir tanesi isteğe bağlı olduğundan 3 ve 4 değerli olarak kullanılır. Şimdi bu değerleri bir inceleyelim.
div{text-shadow: 1px 2px 3px #000}
Yukarıdaki kodda yer alan değerleri şöyle açıklayabiliriz.
1px; İlk değer yataydaki mesafe içindir Artı değerler metnin sağından itibaren uzaklık değeridir, negatif değerler metnin soluna doğru mesafeyi gösterir.
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österir.
3px; 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ğerler göre şekil alır.
#000; ise gölgenin hangi renk olacağını göstermektedir.
Dersi takip ederek daha iyi bir sonuç elde edebilirsiniz. Dokümanları indirerek de kodlar üzerinde denemeler yaparak işi kavrayabilirsiniz.