Metin gölge - CSS Hileleri

Anonim
p ( text-shadow: 1px 1px 1px #000; )

Virgülle ayırarak birden çok metin gölgesi uygulayabilirsiniz.

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

İlk iki değer, gölge ofsetinin uzunluğunu belirtir. İlk değer yatay mesafeyi belirtir ve ikincisi gölgenin dikey mesafesini belirtir. Üçüncü değer bulanıklık yarıçapını belirtir ve son değer gölgenin rengini tanımlar:

1. değer = X koordinatı
2. değer = Y koordinatı
3. değer = bulanıklık yarıçapı
4. değer = Gölgenin rengi

Pozitif sayıların ilk iki değer olarak kullanılması, gölgenin yatay olarak metnin sağına (ilk değer) yerleştirilmesi ve gölgenin metnin altına dikey olarak yerleştirilmesi (ikinci değer) ile sonuçlanır.

Üçüncü değer, bulanıklık yarıçapı, belirtilebilen ancak zorunlu olmayan isteğe bağlı bir değerdir. Metnin uzatıldığı ve bulanıklık efektine neden olan piksel miktarıdır. Üçüncü değeri kullanmazsanız, sıfır bulanıklık yarıçapı belirtmişsiniz gibi değerlendirilir.

Ayrıca, renk için RGBa veya HSLa değerlerini kullanabileceğinizi unutmayın; örneğin,% 40 beyaz şeffaflık:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )

Örnekler

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Kalem Kompleksi Metin Gölge Örnekleri'ne bakın.

Daha fazla bilgi

  • MDN Belgeleri

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
2+ 1.1+ 3.5+ 9.5+ 10+ hiç hiç