Une ombre (ou un contour) sur du texte en CSS
Le 28-02-2005 par Raphael dans Tutoriels et articles divers.
Créer des effets de texte en CSS, comme des ombres portées, est très simple à mettre en oeuvre.
Important : les techniques actuelles relèvent toutes du "bidouillage" car elles poseront des problèmes si le navigateur des visiteurs est ancien ou n'a pas activé les styles CSS, ou simplement si vos visiteurs utilisent un navigateur textuel ou braille. En effet, dans ce cas, la structure HTML sera affichée brute et tous les textes ombrés apparaîtront en double, l'un à côté de l'autre.
Solution "propre" : le contenu généré en CSS
CSS permet de générer du contenu dynamiquement grâce à la propriété Content. Ce genre de technique est à utiliser avec parcimonie car le contenu généré ne s'affichera pas sur les navigateurs sans styles CSS.
Cependant, dans notre cas, cela nous arrange, justement. Si les CSS sont activés, l'ombre apparaîtra; dans le cas contraire, elle sera tout simplement ignorée sans troubler la navigation.
Le principe sera de rajouter sur nos titre principaux, h1, une pseudo classe :after associée à une propriété content qui va afficher le contenu de l'attribut title.
En clair, l'ombre sera le titre et content va générer le texte qui va s'afficher au-dessus de l'ombre et qui sera simplement le contenu de l'attribut title : il faudra donc bien veiller à ce qu'il soit strictement identique au contenu du titre.
Important : Notez que pour l'instant, Internet Explorer (dans toutes ses versions) ne reconnaît pas encore la pseudo-classe :after. Dans ce navigateur, seul le titre (c'est à dire l'ombre) sera affiché. Attention à ne pas lui donner une couleur trop similaire au fond de page !
Si vous tenez à obtenir un résultat visuel sur Internet Explorer, vous devrez passer par le hack "IE7" de Dean Edwards.
<style type="text/css">
<!--
h1 {
font: bold 25px/25px verdana, sans-serif;
color: gray;
}
h1:after {
display: block;
margin-left: -2px;
margin-top: -26px;
color: red;
content: attr(title);
}
-->
</style>
Voici la partie HTML :
<h1 title="Gros titre">Gros titre</h1>
Un problème, une question ?
Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon Spécifique aux tutoriels et articles du Forum Alsacréations.
