Text-shadow, pour tous navigateurs

L'attribut d'ombrage de texte CSS 3 standard et l'alternative pour les anciens navigateurs.

L'effet d'ombre sous les charactères d'un texte existe depuis Internet Explorer 5.5 sous la forme d'un filtre ActiveX. Il s'est généralisé à tous les navigateurs en devenant une propriété de CSS 3.

Le code standard

La propriété text-shadow est suivie d'une définition ou une liste de définitions séparées par une virgule.

On peut annuler la propriété avec le définition: text-shadow:none.

Chaque définition est composée de 4 paramètres dont deux sont optionnels.

• Couleur. Optionnelle. Par défaut c'est la couleur de texte de l'élément.
• Décalage horizontal. C'est la largeur de l'ombre qui s'étend à droite si la valeur est positive. Une valeur négative la place à gauche.
• Décalage vertical. C'est la hauteur de l'ombre vers le bas si elle positive, vers le haut sinon.
• Niveau de flou. Optionnel, vaut 0 par défaut. Une valeur entière supérieure à zéro rend l'ombre plus légère.

Le code de la démo:

.tshadow
{
  text-shadow: 1px 1px 2px black;
}

Pour entourer les caractères avec un effet de halo:

.halo
{
  text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray;
}

Exemple:

Le code CSS pour tous navigateurs

<style>
.tshadow
{ 
	text-shadow: 1px 1px 2px black;
}
.halo
{
	text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray;
}
</style>

Pour accéder à ces propriétés en JavaScript...

object.style.textShadow="1px 2px 2px gray";