Box-shadow ile farkı ne?
text-shadow üç sayı ve bir renk alır: yatay kayma, dikey kayma ve bulanıklık. Kutu gölgesinden farklı olarak yayılma (spread) değeri yoktur ve inset anahtar sözcüğü geçersizdir. Gölge, harflerin gerçek silüetini izler; dikdörtgen bir kutuyu değil. Birden çok katman virgülle sıralanır ve listedeki ilk katman en üstte boyanır — kontur ve blok derinlik gibi biçimlerde sıra doğrudan görünümü değiştirir.
Yaygın kullanım kalıpları
En işlevsel kullanım süslemek değil, okunabilirliği kurtarmaktır: fotoğraf üzerine yerleşen bir başlıkta 0 1px 3px rgba(0, 0, 0, 0.6) gibi tek bir yumuşak katman, arka plan değişse bile harflerin kenarını ayırır. Neon görünümü, kayması sıfır olan ve bulanıklığı kademeli büyüyen üç dört katmanın aynı renk ailesinden yazılmasıyla elde edilir; içteki katman beyaza yakın, dıştakiler doygun renkte olmalıdır. Blok derinlik ise bulanıklığı sıfır olan katmanların birer piksel kaydırılmasıyla kurulur. Dört yöne bir piksellik keskin gölge koyarak kontur da yapılabilir; ancak bugün bunun daha temiz yolu -webkit-text-stroke ile paint-order: stroke fill ikilisidir.
Dikkat edilecek noktalar
Gölgeyi kontrast aracı olarak görmeyin: erişilebilirlik ölçümleri yazı ile arka plan rengini karşılaştırır, gölgeyi hesaba katmaz. Zayıf kontrastı gölgeyle yamamak yerine metnin arkasına yarı saydam bir katman koymak daha güvenlidir. Küçük punto ve ince ağırlıktaki yazılarda bulanık gölge harfleri okunmaz hâle getirir; gölgeyi 24 piksel ve üstü başlıklarda kullanın. Çok sayıda katman büyük metinlerde boyama maliyetini artırır, bu yüzden gölge sayısını ekranda gerçekten görülen kadar tutun ve gölgeyi transition ile canlandırmak yerine ikinci bir katmanın opacity değerini değiştirin. text-shadow tüm tarayıcılarda uzun süredir desteklenir, ayrı bir ön ek gerekmez. Başlık kartının zeminini gradyan üreticisiyle hazırlayıp iki kodu birleştirebilirsiniz.