Retrouvez cet article dans : Linux Pratique 35
Pour mettre un titre en évidence sur votre site Web, il suffit parfois d'ajouter un léger ombrage, ce qui donnera du relief et un certain dynamisme à votre titre. Vous avez peut-être entendu parler de la propriété CSS text-shadow ? Il s'agit d'une norme CSS 2.0 qui permet justement de définir l'ombrage d'un élément textuel. Cependant, cette propriété n'est, à ce jour, pas encore supportée par les navigateurs Web les plus utilisés comme Firefox 1.5 et MS Internet Explorer 6.0 (notons que Konqueror en revanche interprète parfaitement cette propriété). Vous trouverez donc ici une alternative à la propriété text-shadow...
La superposition de deux titres
Tout est dans le titre du paragraphe. Notre méthode va consister à créer deux titres quasi identiques, si ce n'est qu'ils diffèrent par leur couleur. Puis, il suffira de les superposer en les décalant de quelques pixels l'un par rapport à l'autre...
Le code HTML correspondant est vraiment simple :
<body> [...] <h1>Linux Pratique<span class="ombre">Linux Pratique </span></h1> <p>Un paragraphe ici.</p> [...] </body>
Constatez qu'il suffit d'écrire deux fois le même titre, et l'un des deux exemplaires se trouvera entre des balises <span> pour se voir attribuer la classe ombre. C'est en lui affectant une classe spécifique que nous pourrons différencier les deux titres.
Notez bien que contrairement aux apparences, le titre qui se trouvera au premier plan est le titre défini entre les balises <span> et non le titre <h1> qui lui, deviendra l'ombre du titre. Cela n'a pas beaucoup d'importance, si ce n'est pour l'affectation des couleurs. Ainsi, on écrit d'abord l'ombre du titre, puis le titre lui-même...
Les styles associés aux titres sont les suivants :
h1 {
position: relative;
color : #ff0000;
}
.ombre {
position: absolute;
color: #ff8c00;
top: -3px;
left: -3px;
}
Le plus important ici est de penser à positionner le titre principal en absolute, et de positionner son ombre en relative. En outre, le titre de premier plan doit être décalé par rapport à son ombre (ici, nous l'avons décalé de -3px). Notez que vous pouvez au choix saisir des valeurs négatives ou positives, de ce choix dépendra l'orientation de l'ombre. Une valeur négative place l'ombre légèrement plus bas que le titre, et décalée vers la droite.
Après cela, il ne vous restera plus qu'à choisir les couleurs respectives du titre et de son ombre. Nous avons choisi ici une couleur foncée pour l'ombre et une plus claire pour le titre.
Observez quelques exemples de ce que l'on peut obtenir sur la capture suivante.
A priori, aucun problème pour cette méthode, qui fonctionne correctement sous Firefox 1.5, IE 6.0 et Konqueror 3.5. Néanmoins, les utilisateurs qui utilisent un navigateur en mode texte ou un terminal braille seront bien embêtés puisque tous les titres ombrés de la sorte apparaîtront deux fois. Pour pallier ce nouveau problème, voici une seconde méthode pour mettre vos titres en évidence sans risquer de perturber la navigation de certains utilisateurs qui n'utilisent pas les feuilles de style pour une raison ou pour une autre.
La propriété " content "
La propriété content est utilisée avec les pseudo-éléments :before et :after pour générer un contenu dans un document HTML. En d'autres termes, vous pourrez ajouter du texte, une image, une URL, etc. avant ou après un élément précis de votre page.
Dans notre cas, nous allons affecter à la propriété content, la valeur attr(X). Cette fonction retourne, sous forme de chaîne, la valeur de l'attribut X du sujet du sélecteur. Dans notre cas, il s'agit de l'attribut title, qui devra donc recevoir comme valeur une chaîne de caractères rigoureusement identique au titre lui-même.
Un bémol cependant : le contenu généré ne s'affichera pas sur les navigateurs sans styles CSS (les navigateurs en mode texte en l'occurrence). Mais notez que cela correspond à ce que l'on recherche : si les feuilles de styles sont visibles et activées, alors le titre sera ombré. Dans le cas contraire, le titre apparaîtra normalement, mais une seule fois !
La définition du titre dans le code HTML tient en une ligne :
<h1 title="Linux Pratique">Linux Pratique</h1>
Quant au style associé, il comporte deux déclarations :
h1 {
position: relative;
color : #d2b48c;
}
h1:after {
display: block;
margin-top: -1.2em;
margin-left: -0.1em;
color: #a0522d;
content: attr(title);
}
Attention ! La pseudo-classe :after n'est à ce jour reconnue par aucune version d'Internet Explorer. Pour ce navigateur, seule l'ombre du titre apparaîtra, veillez donc à lui donner une couleur qui se distingue suffisamment de la couleur d'arrière-plan.
Pourquoi utiliser la propriété display: block; ? Eh bien, l'élément title qui doit être ajouté après h1 va ainsi créer un nouveau bloc. Avec un élément en ligne, il aurait été impossible de les superposer. Pour positionner correctement l'ombre par rapport au titre, on définit ensuite les marges (à partir du haut et de la gauche). Il vous faudra peut-être tâtonner un peu avant de trouver la position idéale... Remarquez également que nous utilisons ici une unité relative (em) pour définir les marges. En effet, cela évite à l'utilisateur qui augmenterait au maximum la taille du texte de son navigateur, d'obtenir un titre et son ombre beaucoup trop décalés l'un par rapport à l'autre.
