Propriété text-shadow

La propriété text-shadow définit l'ombre d'un texte. En tant que valeur, la propriété accepte 4 paramètres, énumérés par des espaces, ou le mot-clé none, qui supprime complètement l'ombre (c'est la valeur par défaut).

Syntaxe

sélecteur {
	text-shadow: décalage_x décalage_y flou couleur;
}

sélecteur {
	text-shadow: none;
}

Paramètres

Paramètre	Description
décalage par x	Définit le décalage de l'ombre sur l'axe X. Une valeur positive décale vers la droite, une valeur négative - vers la gauche.
décalage par y	Définit le décalage de l'ombre sur l'axe Y. Une valeur positive décale vers le bas, une valeur négative - vers le haut.
flou	Définit le flou de l'ombre. Plus la valeur est grande - plus l'ombre sera floue. Paramètre optionnel. S'il n'est pas spécifié - l'ombre sera nette.
couleur	Définit la couleur de l'ombre dans n'importe quelle unité de couleur. Paramètre optionnel. S'il n'est pas spécifié - la couleur de l'ombre correspond à la couleur du texte.

Les décalages sur les axes et le flou sont spécifiés dans n'importe quelle unité de taille, sauf les pourcentages.

Exemple

Décalons l'ombre vers le bas et la gauche et ajoutons un léger flou :

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Exemple . Ombre nette

Maintenant, rendons l'ombre de couleur rouge, décalons-la vers le bas et la gauche, mais supprimons le flou - l'ombre sera nette :

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Exemple . Ombre uniforme

Maintenant, l'ombre n'est pas décalée, mais on lui a ajouté un flou :

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Voir aussi

la propriété box-shadow,
qui définit l'ombre d'un conteneur