p ( text-shadow: 1px 1px 1px #000; )Vous pouvez appliquer plusieurs ombres de texte en séparant par des virgules
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Les deux premières valeurs spécifient la longueur du décalage de l'ombre. La première valeur spécifie la distance horizontale et la seconde la distance verticale de l'ombre. La troisième valeur spécifie le rayon de flou et la dernière valeur décrit la couleur de l'ombre:
1. value = La coordonnée X
2. value = La coordonnée Y
3. value = Le rayon de flou
4. value = La couleur de l'ombre
L'utilisation de nombres positifs comme deux premières valeurs aboutit à placer l'ombre à droite du texte horizontalement (première valeur) et à placer l'ombre sous le texte verticalement (deuxième valeur).
La troisième valeur, le rayon de flou, est une valeur facultative qui peut être spécifiée mais pas obligatoire. C'est la quantité de pixels sur laquelle le texte est étiré qui provoque un effet de flou. Si vous n'utilisez pas la troisième valeur, elle est traitée comme si vous aviez spécifié un rayon de flou de zéro.
N'oubliez pas que vous pouvez utiliser des valeurs RGBa ou HSLa pour la couleur, par exemple, une transparence de 40% du blanc:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Exemples
Voir les exemples d'ombre de texte complexe Pen par Chris Coyier (@chriscoyier) sur CodePen.
Plus d'information
- Documents MDN
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3,5+ | 9.5+ | 10+ | tout | tout |