Ombre de texte CSS - Astuces CSS

Anonim

Ombre de texte ordinaire:

p ( text-shadow: 1px 1px 1px #000; )

Ombres multiples:

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 pour la couleur, par exemple, une transparence de 40% du blanc:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )