Text Shadow Generator
CSS text shadow
CSS text shadow Tarayıcınızda yerel olarak çalışır
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
Metin Gölgesi Oluşturucu, canlı önizleme ve CSS ile metnin arkasındaki gölgenin ofsetini, bulanıklığını, rengini ve opaklığını ayarlar. Kutu gölgesinden farklı olarak yayılma değeri yoktur, bu da insanları yakalar: Bir metin gölgesini daha ağır hale getirmenin tek yolu, birkaç gölgeyi tek bir bildirimde istiflemektir. Fotoğraftaki açık renkli metnin arkasına hafif koyu bir gölge koymak, okunabilirlik açısından çok faydalıdır ve asla metni okunabilir kılan şey olmamalıdır, çünkü arka plan değiştiği anda kaybolur.
Where people use the
- Altyazının fotoğrafın üzerinde okunması için hafif bir gölge eklemek.
- Preslenmiş veya oyulmuş başlık efekti oluşturma.
- Retro veya neon metin tedavisi üretmek.
- Bir gölgenin ucuz görünmeden önce ne kadar ağır olması gerektiğini test etmek.
How to use the
- 1
Ofsetleri ayarlayın
Ofset X sağa doğru hareket eder, ofset Y aşağı doğru hareket eder. Bir veya iki piksel uzaklığı derinlik olarak okunur; daha büyük olan her şey alt gölge gibi görünmeye başlar.
- 2
Bulanıklığı ayarlayın
Bulanıklaştırma kenarı yumuşatır. Sıfır, metnin sert bir kopyasını verir; taslak ve retro efektler bu şekilde yapılır.
- 3
Renk ve opaklığı seçin
Açık renkli arka planlar üzerindeki koyu metin, açık renkli bir gölge ister ve bunun tersi de geçerlidir. Açık bir etki istemediğiniz sürece opaklığı düşük tutun.
- 4
CSS'yi kopyalayın
Kural, yapıştırmaya hazır RGBA rengini içerir.
- 5
Daha fazla ağırlığa ihtiyacınız varsa gölgeleri yığınlayın
Stil sayfanıza virgülle ayrılmış ikinci bir gölge ekleyin. Yayılma olmadığından metin gölgesini kalınlaştırmanın tek yolu budur.
İpuçları ve en iyi uygulamalar
- Daha azı daha fazladır: Düşük opaklıkta bir veya iki piksel, yoğun bir bulanıklığın üstesinden gelir.
- Erişilebilirlik için hiçbir zaman yalnızca gölgeye güvenmeyin; alttaki kontrastı düzeltin.
- Özelliğin miras alındığını unutmayın, bu nedenle onu kast ettiğiniz öğeye göre kapsayın.
Sık sorulan sorular
Neden spread değeri yok?
Çünkü text-shadow birini desteklemiyor. Sözdizimi ofset X, ofset Y, yalnızca bulanıklık ve renktir. Yayılmayı simüle etmek için, birkaç aynı gölgeyi biraz farklı ofsetlerle üst üste koyarsınız.
Bir resmin üzerindeki metni okunabilir hale getirmek için bunu kullanabilir miyim?
Sadece ek olarak. Gölge, kenar boşluklarına yardımcı olur ancak yoğun alanlarda başarısız olur ve arka plan rengine göre ölçülen WCAG kontrast oranına dahil edilmez. Okunabilirlik gerçekten önemliyse ince kumaş veya sağlam bir panel ekleyin.
Metnin ana hatlarını nasıl çizerim?
Sıfır bulanıklık ile her yönde artı ve eksi bir pikselde dört gölgeyi yığınlayın. Bu, her yerde desteklenmeyen -webkit-text-stroke'a ihtiyaç duymadan bir taslak efekti üretir.
Sayfayı yavaşlatır mı?
Tek bir statik gölgenin neredeyse hiçbir maliyeti yoktur. Bir metin gölgesini canlandırmak veya çok sayıda metne büyük, bulanık bir gölge uygulamak, yeniden boyama maliyetinin ortaya çıktığı yerdir.
Alt öğeler tarafından miras mı alındı?
Evet. Metin gölgesi kalıtsaldır, bu nedenle onu bir kapsayıcıya ayarlamak onu metin içeren her alt öğeye uygular ve bu bazen şaşırtıcı olur.