Cette propriété accepte une liste de valeurs séparées par des virgules afin d'appliquer des effets d'ombre au texte ou à un élément de texte.
Les effets d'ombre sont appliqués dans l'ordre spécifié et peuvent donc revêtir l'un et l'autre, mais sans jamais recouvrir le texte lui-même.
Les effets d'ombre ne changent pas la dimension d'un élément de texte, mais peut l'étendre au-delà ses limites. Une compensation de l'ombre est spécifiée avec deux dimensions qui indiquent la distance du texte.
La première valeur de la longueur détermine la distance horizontale à la droite du texte. Une valeur négative de la longueur horizontale place l'ombre à gauche du texte.
La deuxième valeur de la longueur spécifie la distance verticale en-dessous du texte. Une valeur négative de la longueur verticale place l'ombre au-dessus du texte.
text-shadows | |
---|---|
Valeur | none {Couleur Taille_à_droite Taille_en_bas rayon, Couleur Taille_à_droite Taille_en_bas rayon} |
Valeur par défaut | aucune |
Domaine d'application | Tous les éléments |
Héritage | non |
Media | visuel |
Valeur possible |
Action | Exemple |
---|---|---|
h1 {text-shadow: Taille_à_droite Taille_en_bas} |
L'ombre du texte se trouve à droite et en-bas de l'élément de texte. | h1 {text-shadow: 0.2em 0.2em} |
h2 {text-shadow: Taille_à-droite Taille_en_bas Rayon Couleur} |
L'ombre du texte se trouve à droite et en bas de l'élément de texte, de plus un rayon de 5 pixels est spécifié ainsi qu'une couleur rouge. | h2 {text-shadow: 3px 3px 5px red} |
h3 {text-shadow: Taille_à_droite Taille_en_bas Rayon Couleur, Couleur2 Taille_à_gauche Taille_en_bas Rayon, Taille_à_droite Taille_au_dessus} |
Spécification d'une liste d'effets d'ombre : Première ombre à droite et sous l'élément de texte et de couleur rouge, Seconde ombre à gauche et à et en bas avec une couleur jaune flou, Troisième ombre à droite et au-dessus du texte et sans couleur |
h3 {text-shadow: 3px 3px 3px red, yellow -3px -3px 2px, 3px -3px} |
A Moscou, la Douma,
<h2 style="text-shadows: 5px 5px 4px"> ... </h2> <p> <h3 style="text-shadows: 3px 3px 3px navy"> ... </h3> <h3 style="text-shadows: 3px 3px 3px yellow, -3px -3px 3px red, 3px -3px 3px lime"> ... </h3> <h4 style="text-shadows: 0.8em 0.6em 0.5em green"> ... </h4> <h4 style="text-shadows: -3mm -3mm 3mm purple"> ... </h4> ... </p>
Windows | Macintosh | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
NE4 | NE6 | NE7 | IE5 | IE55 | IE6 | OP5 | OP6 | OP7 | NE4 | NE6 | NE7 | IE4 | IE5 |