CSS text-shadow Özelliği Nedir ve Nasıl Kullanılır?
CSS text-shadow metinlere gölge vermek, site görselliği açısından her zaman tasarımcıların tercih ettiği yöntemlerden birisidir. 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 eklenmiştir. text-shadow özelliği ile görsel düzenleme programlarında (photoshop, fireworks vb.) kullanılan gölgeye yakın sonuçlar elde edebiliriz.
text-shadow
Bu özellik bir element içindeki metne bir veya daha fazla gölge vermek için kullanılır.
Yapısı: text-shadow: <değer>
Aldığı Değerler: shadow,… | none | inherit
Başlangıç Değeri: Tanımlama yok
Uygulanabilen Elementler: Tüm elementler
Kalıtsallık: Yok
text-shadow değeri 4 kısımdan oluşur. Bir örnek ile açıklayalım.
.title
{
text-shadow: 3px 2px 1px #000;
}
3px; İ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. Negatif değerler ise metnin üstüne doğru mesafesini gösterir.
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ğerler göre şekil alır.
#000; renk değeri. Gölgenin renk değerini gösterir.
Birden fazla gölge kullanımı
Birden fazla gölge tanımı yapabiliriz. Aralarında virgül kullanarak birden fazla virgül kullanabiliriz.
color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
Virgül ile ayrılarak birden fazla gölge kullanılabilir.
CSS text-shadow özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
