Les techniques modernes de publication Web reposent désormais sur la séparation du fond de la forme. Le fond est pris en charge par le langage HTML, et la forme par le langage CSS. Un des points parfois délicat, est l'utilisation d'images dans un but purement esthétique, et qui font logiquement partie de la forme et non du fond. Nous allons voir dans cet article plusieurs méthodes permettant d'intégrer des images dans un document HTML uniquement par le biais des CSS.
Beaucoup d'images sont utilisées dans le but unique d'embellir les pages HTML. Ces images n'apportent rien au contenu, et en toute logique ne devrait pas être présentes dans la partie HTML de la page. De plus, si l'on souhaite changer l'apparence de la page, il est plus pratique de n'avoir que le fichier CSS à changer, plutôt que de devoir parcourir le fichier HTML à la recherche des images de présentation.
Mais attention, les images insérées par CSS sont complètement absentes du contenu, et donc inaccessibles pour les navigateurs non-graphiques. Les CSS ne doivent donc pas remplacer des images utiles au contenu.
La première méthode pour ajouter des images en utilisant les CSS est d'utiliser les images de fond. En plus de l'utilisation classique qui consiste essentiellement à fournir un fond de page, les CSS permettent d'atteindre des effets plus qu'intéressants.
IMG
isoléEn utilisant un élément DIV vide, on peut
aisément remplacer une image purement décorative par une
image de fond. Le principe consiste simplement à dimensionner le DIV
à la même taille que l'image cible, et à lui
appliquer l'image à remplacer comme image de fond. Un petit
raffinement est de supprimer la répétition de l'image pour
éviter des effets disgrâcieux sur les bords. Attention ! Il
ne faut pas oublier qu'à la base il n'y a pas de texte
alternatif, donc ce genre de technique doit être
réservé aux images n'ayant pas d'utilité pour le
contenu de la page.
DIV.
Ce sujet étant vaste, il ne sera pas détaillé ici.Cet exemple montre comment remplacer une image à l'aide d'un
élément DIV et d'une image de fond. Le
portrait d'un personnage doit apparaitre dans le cadre ci-contre.
<div id="avatar"> </div>
div#avatar {
background-image: url(avatar-petit.png);
background-repeat: no-repeat;
width: 80px;
height: 103px;
padding: 0px;
}L'objectif ici est de créer une bordure stylée. Pour
cela, nous allons utiliser une image de fond que l'on va
répéter uniquement dans une direction grace background-repeat,
et que l'on va positionner à l'aide de la
propriété background-position. En jouant un
peu sur les marges intérieures pour bien séparer la
bordure du reste, le tour est joué !
Malheureusement, pour mettre des bordures de chaque coté, il
faut imbriquer plusieurs éléments DIV, ce
qui n'est pas forcément idéal comme solution (mais c'est
la seule en CSS2).
Cet exemple montre comment créer deux bordures autour d'un
texte à l'aide de 2 DIV et d'une image de fond. Une
bordure graphique doit apparaitre au dessus et en dessous du texte
d'exemple dans le cadre ci-contre.
<div class="bordure-top"> <div
class="bordure-bottom">Texte d'exemple.</div> </div>
div.bordure-top {padding: 0px 7px 15px 7px;
padding-top: 15px;
border-left: 1px solid;
border-right: 1px solid;
background-image: url(borderh.gif);
background-position: top;
background-repeat: repeat-x;
}
div.bordure-bottom {background-image: url(borderh.gif);
background-position: bottom;
background-repeat: repeat-x;
}
Il arrive très souvent que l'on veuille ajouter une
icône spécifique à une série
d'éléments similaires. En particulier, on voit
régulièrement sur certains sites des petites icônes
jouxtant les liens pour signifier que le lien est extérieur au
site. Il existe plusieurs moyens d'obtenir cet effet via les CSS, et
nous allons étudier ici la solution utilisant les images de fond.
L'avantage des CSS dans cette situation est énorme, il permet
d'éliminer tous les éléments IMG de ce
genre qui obscurcissent le code.
padding n'est pas
appliquée aux éléments de type inline, ce qui fait
que le texte peut recouvrir l'îcone.Cet exemple montre comment ajouter une icône à tous les
liens de la classe extern en utilisant une image de fond.
Une sorte de flêche doit apparaitre à la suite du lien.
Texte d'exemple. <a href="http://www.w3.org/"
class="extern">Lien d'exemple</a>. Texte d'exemple
a.extern {
background-image: url(extern.png);
background-repeat: no-repeat;
background-position: center right;
padding-right: 18px;
}
Le contenu généré est une technique permettant d'ajouter du contenu avant ou après un élément en utilisant les CSS. Malheureusement, le navigateur le plus répandu du marché (IE Windows) ne supporte pas cette propriété, ce qui veut dire qu'elle n'est pas conseillée pour l'instant.
C'est finalement l'utilisation la plus logique pour cette technique.
Elle a l'avantage de garder la propriété background-image
libre pour d'autres utilisations, mais comme je l'ai dit
précédemment, elle n'est pas aussi universellement
suportée que les images de fond. Le principe est relativement
simple, il utilise les pseudo-éléments :before
et :after. Ces pseudo-éléments sont
justement conçus pour permettre l'ajout de contenu par CSS via la
propriété content. Une petite remarque au
passage, cette propriété n'est pas limitée à
un seul contenu ; vous pouvez donc enchaîner ainsi du texte et des
images.
content marche dans la
plupart des cas simple, mais peut poser des problèmes si on veut
utiliser plusieurs contenus générés dans la
même balise.Cet exemple montre comment ajouter une icône à tous les
liens de la classe extern2 en utilisant le
pseudo-élément :after. Un astérisque
et une sorte de flêche doivent apparaitre à la suite du
lien.
Texte d'exemple. <a href="http://www.w3.org/"
class="extern2">Lien d'exemple</a>. Texte d'exemple
a.extern2:after {
content: ' *' url(extern.png);
}
Les puces des listes à puces peuvent aisément être remplacées par des images personnalisées. Mais en approfondissant un peu, on peut aller plus loin que l'utilisation ordinaire.
Pour personnaliser un peu plus certains éléments d'une
liste, il peut être souhaitable de changer la puce
associée. Un cas d'utilisation courant est la mise en valeur d'un
élément particulier de la liste, mais on peut imaginer
aussi des cas de représentation arborescente plus complexes
où chaque élément dispose de sa puce
individualisée. Pour bien comprendre le mécanisme
impliqué, il faut assimiler le fait qu'habituellement, la
propriété list-style définissant
l'aspect d'une puce est positionnée au niveau de la liste, et non
au niveau de l'élément de la liste. Les
éléments de la liste héritent alors de cette
propriété. Cela permet de simplifier les feuilles de
style, mais inutile de rentrer trop dans les détails, car la
conclusion, c'est que la propriété list-style
n'a de sens que pour les éléments de liste et non pour la
liste elle même. Nous pouvons donc styler un élément
de la liste en particulier.
<ul class="puces"> <li>Article 1 bleu</li>
<li>Article 2 bleu</li> <li id="puce-rouge">Article 3
rouge</li> <li>Article 4 bleu</li> </ul>
ul.puces {
list-style-image: url(dot.png);
}
li#puce-rouge {
list-style-image: url(dot-rouge.png);
}
Pour embellir les titres d'un document, on peut souhaiter leur
ajouter une puce. Pour cela nous pouvons bien sur utiliser les
techniques vues précédemment, mais il existe une autre
méthode plus appropriée à ce genre
d'élément. Sémantiquement, un titre est proche d'un
élément de liste. Une fois rassemblés dans une
table des matières, les titres deviennent d'ailleurs
concrètement des éléments de liste. Nous allons
donc donner aux titres l'aspect d'un élément de liste
à puce, et nous pourrons ensuite le styler en conséquence.
Pour changer l'aspect d'un élément, il faut utiliser la
propriété display, et pour lui donné
l'aspect d'un élément de liste à puce, il faut
mettre la valeur list-item. Ensuite, il suffit de changer
les propriétés classiques de style des listes pour obtenir
l'effet désiré.
display: list-item n'est
pas supportée.Paragraphe d'exemple.
<h5 class="puces">Titre d'exemple</h5>
<p>Paragraphe d'exemple.</p>
h5.puces {
display: list-item;
list-style-image: url(dot.png);
list-style-position: inside;
}