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.

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.

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(...)";