Appliquer une ombre sur du texte est un gadget visuel qui n'a que peu d'utilité... c'est pourquoi le sujet m'a intéressé ;-)

La première version du tutoriel sur ces techniques était vraiment très discutable...

Une technique revisitée

... La seconde est également discutable !!! Mais un peu moins tout de même : cela reste de la bidouille destinée principalement à faire mumuse avec les possibilités des CSS.

L'ancien tutoriel proposait de superposer deux titres H1 identiques mais de couleur différentes. Or, depuis la mode des pseudo-référenceurs de mettre des titres H1 partout, j'ai préféré modifier cette méthode.

Bien-sûr, elle reste très contestable car, comme l'a souligné Laurent Denis : elle s'apparente tout à fait elle aussi aux mauvaises pratiques de référencement par multiplication cachée de mots-clés...

Utiliser du contenu généré en CSS

Par contre, la nouveauté vient d'une seconde technique pour réaliser ce gadget : l'utilisation du pseudo-élément :after allié à la propriété content.

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.

On utilisera la propriété title qui aura le double avantage de générer le texte ombre et d'afficher un texte en passant la souris par-dessus le texte.

Voici un exemple :

<h1 title="Gros titre">Gros titre</h1>

h1:after {
    display: block;
    margin-left: -2px;
    margin-top: -26px;
    color: red;
    content: attr(title);
}

Voir l'exemple

Et les images dans tout ça ?

Evidemment, on dira que le moins pire reste encore d'utiliser des images pour faire ses textes ombrés.

Oui peut-être pour certains points, mais les titres en image impliquent :

• une séparation incomplète de la structure et de la forme (cela ne facilite pas les mises à jour futures car il faut refaire toutes les images de tous les titres)
• une augmentation du poids qui peut être conséquente, même si ce n'est plus trop important
• des problèmes de référencement et d'indexation car une image avec alt est moins bien prise en compte.

A vous de voir ! Et de proposer d'autres applications pratiques ?