CSS Yazı Gölgesi (text-shadow) Üretici

Nasıl çalışır?

Gölge renginizi sol alana tek satır olarak girin — HEX de yazabilirsiniz, rgb() ya da hsl() da. Sonra dört kaydırıcıyla oynayın: yatay ve dikey kayma gölgenin hangi yöne düştüğünü, bulanıklık kenarın ne kadar yumuşadığını, koyuluk ise saydamlığı belirler. Başlıklara hafif derinlik için 2 piksel kayma, 6 piksel bulanıklık ve yüzde 40 koyuluk iyi bir başlangıçtır — kodda 2px 2px 6px rgba(0, 0, 0, 0.4) olarak yazılır. Neon efekti için iki kaymayı da sıfırlayıp bulanıklığı 20-30 piksele çekin ve parlak bir renk girin: gölge yazının her yanına eşit dağılır ve ışıma gibi görünür. Kabartma (letterpress) içinse bulanıklığı 0'a, kaymayı 1 piksele indirin. Önizlemedeki örnek yazı her değişiklikte yenilenir; beğendiğiniz sonucun kodunu sağ panelden alın, efektin görüntüsü gerekiyorsa İndir düğmesi 1200×630 piksellik bir PNG kaydeder.

Bu araç css text shadow generator, text shadow css aramalarıyla da biliniyor.

text-shadow nedir?

text-shadow, bir yazının harflerinin arkasına gölge çizen CSS özelliğidir. Değerleri sırayla yatay kayma, dikey kayma, isteğe bağlı bulanıklık ve renktir; virgülle ayrılarak aynı yazıya birden çok gölge katmanı verilebilir. Gölge harf hatlarını birebir izler: kutuya değil, karakterlerin görünen şekline uygulanır. Yazının kapladığı alanı ve satır yerleşimini değiştirmez, yalnızca çizimdir; bu yüzden başlığa derinlik katmanın yerleşimi bozmayan en kısa yoludur.

Bulanıklık yarıçapı (blur) nedir?

Bulanıklık yarıçapı, gölgenin kenarının kaç piksellik bir bantta yumuşayarak kaybolacağını söyleyen üçüncü sayıdır. 0 değerinde gölge, yazının keskin kenarlı bir kopyasıdır; değer büyüdükçe gölge dağılır, genişler ve açılır. Kayma sıfırken bulanıklığı büyütmek gölgeyi her yöne eşit dağıtır — neon ve ışıma efektlerinin temeli budur. Yarıçap eksi olamaz; araçtaki kaydırıcı da bu yüzden 0'dan başlar.

text-shadow ile box-shadow arasındaki fark nedir?

İkisi de aynı değer mantığını kullanır ama farklı şeye gölge verir: text-shadow harflerin görünen hatlarını izler, box-shadow ise öğenin dikdörtgen kutusuna çizilir. Yazıya box-shadow verirseniz gölge harflerin değil, yazıyı saran görünmez kutunun altına düşer. Sözdizimi de ayrışır: text-shadow yayılma (spread) değeri almaz ve inset bilmez, buna karşılık çok katmanlı kullanım text-shadow'da çok daha yaygındır çünkü neon ve kabartma gibi yazı efektleri katmanla kurulur. Kural pratik: harflere gölge için text-shadow, kart ve kutulara gölge için box-shadow.

Kontrast tuzağı: gölge, okunmayan yazıyı kurtarmaz

Yazı gölgesinin en yaygın yanlış kullanımı, zeminle yeterli kontrastı olmayan bir yazıyı gölgeyle okunur kılmaya çalışmaktır. Fotoğraf üstündeki beyaz başlıkta koyu bir gölge gerçekten yardım eder; ama erişilebilirlik ölçümleri (WCAG kontrast oranı) yazı rengi ile zemin arasında yapılır ve gölgeyi hesaba katmaz. Gölge, açık zeminde açık renkli yazı gibi temelden yanlış bir seçimi kurtaramaz — önce yazı ve zemin rengini doğru seçin, gölgeyi üstüne derinlik olarak ekleyin.

İkinci tuzak keskin ve tam opak gölgedir: bulanıklığı 0, koyuluğu yüzde 100 yapıp kaymayı büyütürseniz gölge ikinci bir yazı kopyası gibi görünür ve harfler çift basılmış izlenimi verir. Küçük puntolarda bu etki okumayı ciddi zorlaştırır. Gövde metnine gölge vermemek, gölgeyi başlık ve vurgu gibi büyük öğelere saklamak en güvenli kuraldır.

Hangi durumda hangi yazı gölgesi?

Aynı dört değerin farklı dengeleri bambaşka etkiler üretir; kod hep aynı kalıpta yazılır.

• Fotoğraf üstünde beyaz başlık → 0 2 8 ve yüzde 50-60 koyuluk: yazı zeminden ayrılır
• Sayfa başlığına hafif derinlik → 2 2 6 ve yüzde 30-40 koyuluk: fark edilir ama bağırmaz
• Neon / ışıma → 0 0 24 ve parlak renk, yüzde 80-100: kaymasız gölge her yana dağılır
• Kabartma (letterpress) → 0 1 0 tam opak: koyu zeminde açık, açık zeminde koyu tek piksel

Sık sorulanlar

text-shadow değerlerinin sırası ne anlama geliyor?

Okunuş hep aynıdır: önce yatay kayma, sonra dikey kayma, sonra bulanıklık, en sonda renk. box-shadow'dan farklı olarak yayılma (spread) değeri ve inset anahtar kelimesi yoktur; üç sayıdan sonra doğrudan renk gelir. Ürettiğimiz kodda dört parça da açık yazılır — hangi kaydırıcıyı oynattıysanız koddaki karşılığı o parçadır.

Birden çok gölge katmanını aynı yazıya verebilir miyim?

Evet, gölgeler virgülle art arda yazılır ve neon efektinin dolgun görünmesi çoğu zaman böyle yapılır: aynı renkte 10, 20 ve 40 piksel bulanıklıklı üç katman üst üste biner. Bu sayfa kodu sade tutmak için hep tek katman yazar; katman kurmak isterseniz farklı ayarlarla birkaç sonuç üretip parçaları aranıza virgül koyarak birleştirin.

İndirilen PNG dosyasında ne var?

Örnek yazının gölgeli hali, 1200×630 piksel boyutunda — efekti bir tasarım onayına ya da mesaja görüntü olarak koymak için pratiktir. Kodun kendisi dosyada değildir; onu sağ panelden Çıktıyı kopyala ile alırsınız, kod her değişiklikte orada hazır bekler.

Gölge her tarayıcıda aynı görünür mü?

Değer sözdizimi her güncel tarayıcıda aynıdır ve text-shadow uzun yıllardır desteklenir; yine de bulanıklığın yumuşaklığı tarayıcıların çizim motorlarına göre gözle görülür incelikte farklılaşabilir. Kritik bir tasarımda sonucu hedef tarayıcıda bir kez kontrol etmek en sağlamıdır.