p ( text-shadow: 1px 1px 1px #000; )Můžete použít více stínů textu oddělením čárkami
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )První dvě hodnoty určují délku odsazení stínu. První hodnota určuje vodorovnou vzdálenost a druhá určuje svislou vzdálenost stínu. Třetí hodnota určuje poloměr rozostření a poslední hodnota popisuje barvu stínu:
1. hodnota = souřadnice X
2. hodnota = souřadnice Y
3. hodnota = poloměr rozostření
4. hodnota = barva stínu
Použití kladných čísel jako prvních dvou hodnot končí umístěním stínu napravo od textu vodorovně (první hodnota) a umístěním stínu pod text svisle (druhá hodnota).
Třetí hodnota, poloměr rozostření, je volitelná hodnota, kterou lze zadat, ale nemusíte. Je to množství pixelů, které je text roztažen, což způsobuje efekt rozostření. Pokud třetí hodnotu nepoužíváte, bude se s ní zacházet, jako kdybyste zadali nulový poloměr rozostření.
Nezapomeňte, že pro barvu můžete použít hodnoty RGBa nebo HSLa, například 40% průhlednost bílé:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Příklady
Podívejte se na ukázky komplexního textového stínu pera od Chrisa Coyiera (@chriscoyier) na CodePen.
Více informací
- Dokumenty MDN
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9,5+ | 10+ | žádný | žádný |