CSS Effets d'Ombre

Ombres

Avec CSS, vous pouvez créer des effets d'ombre !

Survolez-moi !

Ombre de Texte CSS

La propriété CSS text-shadow applique 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 à l'ombre :

Ombre horizontale et verticale, avec couleur :

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

Ensuite, ajoutez un effet de flou à l'ombre :

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

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

L'exemple suivant montre un texte blanc avec une ombre noire :

Ombre de texte sur un fond blanc :

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

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

Ombre de texte avec lueur néon rouge :

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

Pour ajouter plus d'une ombre au texte, vous pouvez créer une liste d'ombres séparées par des virgules.

L'exemple suivant montre une ombre de 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 des ombres noire, bleue et bleu foncé :

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

Vous pouvez également utiliser la propriété text-shadow pour créer une bordure simple autour d'un texte (sans ombres) :

 h1 { 
 color: coral; 
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 } 