p ( text-shadow: 1px 1px 1px #000; )Môžete použiť viac tieňov textu oddeľovaním čiarkami
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Prvé dve hodnoty určujú dĺžku posunu tieňa. Prvá hodnota určuje horizontálnu vzdialenosť a druhá špecifikuje vertikálnu vzdialenosť tieňa. Tretia hodnota určuje polomer rozostrenia a posledná hodnota popisuje farbu tieňa:
1. hodnota = súradnica X
2. hodnota = súradnica Y
3. hodnota = polomer rozostrenia
4. hodnota = farba tieňa
Použitie kladných čísel ako prvých dvoch hodnôt končí umiestnením tieňa napravo od textu vodorovne (prvá hodnota) a tieňom umiestneným pod text zvisle (druhá hodnota).
Tretia hodnota, polomer rozmazania, je voliteľná hodnota, ktorú je možné určiť, ale nemusíte. Je to množstvo pixelov, ktoré je text roztiahnutý, čo spôsobuje efekt rozmazania. Ak tretiu hodnotu nepoužívate, bude sa s ňou zaobchádzať, akoby ste zadali nulový polomer rozmazania.
Nezabudnite, že pre farbu môžete použiť hodnoty RGBa alebo HSLa, napríklad 40% priehľadnosť bielej:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Príklady
Prečítajte si príklady textových tieňov komplexného pera od Chrisa Coyiera (@chriscoyier) na stránke CodePen.
Viac informácií
- Dokumenty MDN
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1,1+ | 3,5+ | 9,5+ | 10+ | akýkoľvek | akýkoľvek |