p ( text-shadow: 1px 1px 1px #000; )Možete primijeniti više sjena teksta razdvajanjem zareza
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Prve dvije vrijednosti određuju duljinu pomaka sjene. Prva vrijednost određuje vodoravnu udaljenost, a druga okomitu udaljenost sjene. Treća vrijednost određuje radijus zamućenja, a posljednja vrijednost boje sjene:
1. vrijednost = X-koordinata
2. vrijednost = Y-koordinata
3. vrijednost = polumjer zamućenja
4. vrijednost = Boja sjene
Korištenje pozitivnih brojeva kao prve dvije vrijednosti završava postavljanjem sjene desno od teksta vodoravno (prva vrijednost) i postavljanjem sjene ispod teksta okomito (druga vrijednost).
Treća vrijednost, radijus zamućenja, neobavezna je vrijednost koja se može odrediti, ali ne mora. Količina piksela u kojoj je tekst razvučen uzrokuje efekt zamućenja. Ako ne upotrijebite treću vrijednost, tretira se kao da ste naveli radijus zamućenja nula.
Također, imajte na umu da za boju možete koristiti vrijednosti RGBa ili HSLa, na primjer, 40% prozirnosti bijele boje:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Primjeri
Pogledajte primjere složenog teksta olovke olovke Chrisa Coyiera (@chriscoyier) na CodePenu.
Više informacija
- MDN dokumenti
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1,1+ | 3,5+ | 9,5+ | 10+ | bilo koji | bilo koji |