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.

Démonstration

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:

Démonstration

Le code Internet Explorer

Jusqu'à la version 8 d'Internet Explorer, on doit utiliser un filtre.
Celui-ci a quatre paramètres.

Couleur de l'ombre.
Direction. 0=haut, 45=haut droite, 90=droite, 135=bas droite, 180=bas, 225=bas gauche, 315=haut gauche.
Strength. Le niveau de flou, une valeur plus haute rendant l'ombre plus légère.

Ajouter une ombre sous Internet Explorer

.tshadow
{
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
}

Le code Internet Explorer pour l'effet de halo, comme en standard, combine deux définitions:

.halo
{
  filter:
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)		  
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=315,strength=3);
}

La direction 135 ajoute une ombre en bas à droite et la direction 315 en haut à gauche.

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>
<!--[if lte IE 8]> 
<style type="text/css"> 
.tshadow 
{
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
}
.halo 
{
  filter:
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)		  
     progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=315,strength=3);		  
}
</style> 
<![endif]-->

Si l'on veut utiliser une feuille de style séparée, la page devra insérer un fichier additionnel pour IE:

 <!--[if lte IE 8]> 
<link type="text/css" href="ie6.css" rel="stylesheet">
<![endif]-->

Lequel contiendra les définitions .tshadow et .halo.

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

Standard

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

Internet Explorer

object.style.filter="progid:DXImageTransform.Microsoft.Shadow(...)";