Bert
Bos, coordinateur de l'activité
styleCopyright © 1994–2021 W3C® Privacy policy
Créé le 4 août 2005;
Dernière mise à jour le mer. 06 janv. 2021 05:40:49
UTC
Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Justin Ternet
Voir aussi l'index de toutes les astuces.
Sur cette page :
La version 3 de CSS a une propriété appellée "text-shadow" pour ajouter une ombre à chaque lettre d'un quelconque texte. Dans sa forme la plus simple, cela ressemble à quelque-chose comme cela :
h3 {text-shadow: 0.1em 0.1em #333}
Ceci ajoute une ombre gris-foncée (#333) un peu sur la droite (0.1em) et vers le bas (0.1em) par rapport au texte normal. Le résultat ressemble à ceci :
(En Août 2005, tous les navigateurs ne supportent pas encore complètement "text-shadow". L'exemple ci-dessus devrait fonctionner au moins sur Safari et Konqueror.)
La forme la plus simple de la propriété "text-shadow" comporte deux parties : une couleur (comme la #333 ci-dessus) et un décalage (0.1em 0.1em dans l'exemple ci-dessus). Il en résulte une forte ombre au décalage indiqué. Mais le décalage peut également être flou, ce qui entraîne une ombre plus ou moins vaporisée.
Le niveau de flou est donné comme un autre décalage. Voici deux lignes, l'une avec un peu de flou (0.05em) et une avec beaucoup de flou (0.2em) :
h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
Les ombres peuvent rendre le texte plus lisible si le contraste entre le premier plan et l'arrière-plan est faible. Voici un exemple de texte blanc sur un fond bleu pâle, d'abord sans l'ombre et ensuite avec :
h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Sans ombre :
Avec ombre :
Vous pouvez aussi avoir plus d'une ombre. En général, cela a un aspect assez étrange :
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
Mais avec deux ombres sombres et claires bien placés, l'effet peut être utile :
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}
Ceci est un peu dangereux, comme vous pouvez le voir si votre navigateur ne supporte pas "text-shadow". En fait, les couleurs de l'arrière-plan et le texte dans cet exemple sont presque les mêmes (#CCCCCC et #D1D1D1), donc sans les ombres, il y a à quasiment aucun contraste.
L'exemple des deux ombres de la version précédente peut être utilisé encore d'avantage. Avec quatre ombres, un contour peut être donné aux lettres :
h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
Ce n'est pas un contour parfait, et pour le moment (Août 2005), la discussion est encore ouverte à savoir si CSS doit avoir une propriété distincte (ou peut-être une valeur pour "text-decoration") pour faire de meilleurs contours.
Si vous mettez une ombre floue juste derrière le texte, à savoir, avec un décalage de zéro, l'effet consiste à créer une lueur autour des lettres. Si la lueur d'une seule ombre n'est pas assez intense, il suffit de répéter la même ombre à quelques reprises :
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}
Bert
Bos, coordinateur de l'activité
styleCréé le 4 août 2005;
Dernière mise à jour le mer. 06 janv. 2021 05:40:49
UTC