Après avoir vu comment mettre une ombre portée à des éléments de notre site, nous allons voir comment en mettre sur du texte.

Text-shadow


 Voila un petit exemple tout simple, le calque (div) ci-dessous avec une ombre.
Voici certains navigateurs compatibles: Firefox, Safari/Chrome, Opera et IE9.
Et ici le code qui va avec :
text-shadow: 5px 5px 3px #789;
La propriété text-shadow attend au minimum quatre paramètres.

Le premier étant le décalage horizontale avec l'élément en question. Une valeure positive déplacera l'ombre vers la droite alors qu'une négative vers la gauche.
text-shadow: -5px 5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le second étant le décalage vertical avec l'élément en question. Une valeure positive déplacera l'ombre vers le bas alors qu'une négative vers le haut.
text-shadow: -5px -5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le troisième sert à définir la distance de dégradé dans l'ombre. Seules des valeurs positivent sont acceptées.
text-shadow: -5px -5px 0px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Enfin la quatrième est pour la couleur de l'ombre.
text-shadow: -5px -5px 8px #ff0000;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.


Plusieurs ombres

Comme pour le box-shadow, on peut avoir plusieurs ombre différentes sur le texte. Pour cela, il suffit de les séparer par une virgule. L'ordre qui est alors pris en compte, est l'inverse de l'ordre d'écriture. En effet la première ombre renseigné sera au premier et les autres suivront.


#Example_A {
width: 20px;
height: 25px;
margin: 5px;
padding: 20px;
text-shadow: 0 0 5px yellow, 10px -5px #FFFF00, 10px 10px 6px blue, -12px 12px 1px #F600FF, -10px -5px 2px red;
}

A


Pourquoi mettre plusieurs ombres à un texte? Bien utilisé le résultat donne des effets très convaincant sans passer par des logiciels de dessin.
3D

#Example_3D {
color: white;
font-size: 100px;
margin: 5px;
padding: 5px;
text-shadow: 0 1px 0 rgb(204, 204, 204), 0 2px 0 rgb(201, 201, 201), 0 3px 0 rgb(187, 187, 187), 0 4px 0 rgb(185, 185, 185), 0 5px 0 rgb(170, 170, 170), 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

Au feu!!

#Example_Feu {
color: white;
font-size: 50px;
margin: 5px;
padding: 5px;
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}