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