Trucs et Astuces CSS
Chapitre 1 : Généralités sur les éléments

Retour Accueil CSS

7 Mise en évidence

Termes CSS clés employés : ::before
Compatibilité navigateurs : tous.

Problèmatique

Il est fréquent de vouloir mettre en évidence un élément, qu’il s’agisse d’une remarque, d’un avertissement ou d’une astuce, au sein d’une page. Cela pourrait être obtenu très classiquement comme ceci :
<p style= "padding: 13px; margin: 5px; border: 2px black; border-radius: 7px; box-shadow:0px 0px 17px 7px #00BB00 inset;"> <b>Attention :</b> contenu </p>

Résolution

Cette opération est toutefois très répétitive et alourdit le poids de la page. S’il semble évident qu’une classe permet de s’affranchir de toute la partie style, c’est l’insertion de contenu grâce à la pseudo-classe ::before qui va permettre de placer automatiquement la chaîne de texte « Attention : » en gras au début du paragraphe.
Le code CSS nécessaire est celui-ci :
.attention:::before {font-weight: bold; content: "Attention : " }
Les caractères à faire apparaître doivent être placés entre guillemets. On définit également les caractéristiques de tout élément de classe attention, mais les effets peuvent y mettre modifiés à volonté :
.attention {padding: 1em; border: 2px black; border-radius: 7px 7px 7px 7px; box-shadow:0px 0px 17px 7px #00BB00 inset; }
Le code HTML se simplifie alors en :
<p class="attention"> contenu</P>

Vestibulum vitae mollis mauris. Mauris euismod varius nulla congue volutpat. Donec vestibulum porta enim, ut volutpat enim congue at. Nam dapibus fringilla porta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae urna diam, faucibus semper est. Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate. Donec a dictum nunc. Maecenas auctor egestas dui in ullamcorper. Donec ut turpis massa, et auctor velit.

Vous pourriez de la même façon insérer automatiquement une icône ou même un contenu mixte :
.attention::before {content: url(attention.jpg)" "; }
Les deux espaces vierges placés entre les guillemets servent à éloigner un peu le texte de l’icône.

Nam vel nunc arcu, id eleifend metus. Nulla arcu odio, porta sed tristique et, ornare et nulla.

Pellentesque porttitor, mauris non pellentesque iaculis, nisl nisi venenatis felis, sit amet commodo lacus ante a elit. Curabitur eu malesuada odio.

L'image employée est ici de type JPG à fond opaque : un effet plus agréable pourrait être obtenu avec une image GIF ou PNG à fond transparent.


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque
Get Firefox!