p ( text-shadow: 1px 1px 1px #000; )Puteți aplica mai multe umbre de text separând virgula
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Primele două valori specifică lungimea decalării umbrelor. Prima valoare specifică distanța orizontală și a doua specifică distanța verticală a umbrei. A treia valoare specifică raza de estompare, iar ultima valoare descrie culoarea umbrei:
1. valoare = coordonata X
2. valoare = coordonata Y
3. valoare = raza de estompare
4. valoare = culoarea umbrei
Utilizarea numerelor pozitive ca primele două valori se termină cu plasarea umbrei în dreapta textului pe orizontală (prima valoare) și plasarea umbrei sub text pe verticală (a doua valoare).
A treia valoare, raza de estompare, este o valoare opțională care poate fi specificată, dar nu trebuie. Este cantitatea de pixeli pe care textul este întins, ceea ce provoacă un efect de estompare. Dacă nu utilizați a treia valoare, este tratată ca și când ați specifica o rază de estompare de zero.
De asemenea, nu uitați că puteți utiliza valorile RGBa sau HSLa pentru culoare, de exemplu, o transparență de 40% a albului:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Exemple
Vedeți Exemplele de umbre pentru textul complex al stiloului de Chris Coyier (@chriscoyier) pe CodePen.
Mai multe informatii
- Documente MDN
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9.5+ | Peste 10 ani | orice | orice |