CSS Ombre de Texte

Ombre de Texte CSS

La text-shadow propriété ajoute une ombre au texte.

Dans son utilisation la plus simple, vous spécifiez uniquement l'ombre horizontale et l'ombre verticale.

De plus, vous pouvez ajouter une couleur d'ombre et un effet de flou.

Ombre horizontale et verticale :

 h1 { 
 text-shadow: 2px 2px; 
 } 

Ensuite, ajoutez une couleur (rouge) à l'ombre :

Ombre horizontale et verticale, avec couleur :

 h1 { 
 text-shadow: 2px 2px red; 
 } 

Ensuite, ajoutez un effet de flou (5px) à l'ombre :

Ombre horizontale et verticale, avec couleur et effet de flou :

 h1 { 
 text-shadow: 2px 2px 5px red; 
 } 

Ombre de texte sur un fond blanc :

 h1 { 
 color: white; 
 text-shadow: 2px 2px 4px #000000; 
 } 

Ombre de texte avec lueur néon rouge :

 h1 { 
 text-shadow: 0 0 3px #ff0000; 
 } 

La text-shadow propriété accepte également plusieurs ombres pour un élément. Définissez chaque ombre dans une liste séparée par des virgules.

L'exemple suivant montre une ombre de lueur néon rouge et bleue :

Ombre de texte avec lueur néon rouge et bleue :

 h1 { 
 text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff; 
 } 

L'exemple suivant montre un texte blanc avec une lueur néon noire, bleue et rouge :

Ombre de texte avec lueur néon noire, bleue et rouge :

 h1 { 
 color: white; 
 text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red; 
 } 

Astuce : Allez à notre chapitre sur les polices CSS pour apprendre comment changer les polices, la taille du texte et le style d'un texte.

Astuce : Allez à notre chapitre sur les effets de texte CSS pour découvrir différents effets de texte.

Propriété	Description
text-shadow	Spécifie l'effet d'ombre ajouté au texte