Articles - text-shadow

• 
• 
• 
• 
• 
• 

Le text-shadow est un propriété CSS qui est apparu avec la norme CSS2. Celle ci permet d'ajouter un ombrage à un texte. Cette propriété comporte 4 attributs: 2 longueurs, 1 rayon et 1 couleur.

text-shadow: longueur en x, longueur en y, rayon du flou, couleur

Sous Internet Explorer:

filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45);

filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45);

text-shadow:0px 0px 2px yellow

text-shadow:5px 0px 2px yellow

text-shadow:0px 5px 2px yellow

text-shadow:5px 5px 2px yellow

text-shadow:5px 5px 0px yellow

text-shadow:5px 5px 15px yellow

Si vous ne mettez que les 2 premieres valeurs et la couleur, l'ombrage n'aura pas de flou:

text-shadow:5px 5px red

Vous pouvez également accumuler les ombrages:

text-shadow: 3px 3px red, yellow -3px 3px 2px

Vous pouvez constater que la couleur peut etre le premier attribut ou le dernier.

text-shadow:yellow -3px 3px 2px

Le text-shadow est une propriété CSS2 mais elle n'est pas disponible pour Internet explorer (quelque soit la version même Internet explorer 9 qui est en phase de développement) pour Internet Explorer (supérieur ou égale à la version 7), il faut utiliser -ms-text-shadow ou un filtre :filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45);.

Pour ne pas avoir de probleme d'ombrage quelque soit le navigateur, il existe un plugin jQuery : Drop shadow qui permet de gérer les ombrages sous tous les navigateurs