[CSS] Questions de fond - 2 : pratique

06.07.2008

Voici quelques applications pratiques des considérations stratosphériques du précédent papier…

Image et couleur

Pourquoi indiquer une image ET une couleur de fond (autre que transparent) ? Si l'image comporte des zones transparentes ou bien si elle n'est pas répétée, on perçoit bien l'intérêt : l'image se détache sur le fond de couleur. Mais sinon, à quoi bon puisqu'on ne verra jamais la couleur ?

Hé si, on la verra… On la verra un petit moment si l'image est lente à venir, on la verra très longtemps si l'image ne vient pas du tout – et sans l'image attendue, le texte peut être illisible.

Il est donc prudent d'indiquer systématiquement, en guise de roue de secours, un background-color assorti à l'image.

Exemple sur ce blog : les modules de la colonne de droite ont pour fond une version sombre ou très claire du mur de livres, j'ai défini pour eux une couleur de fond dans le ton . Pour vous en rendre compte videz le cache de votre navigateur et, en rechargeant cette page, observez la colonne de droite.

Un test simple à faire chez vous : dans le fichier CSS, faussez provisoirement toutes les URL d'images (par exemple en remplaçant idata par udada ;-) ) et voyez si votre blog demeure présentable – vous aurez peut-être des surprises.

Deux sites pour vous aider à choisir des couleurs :

colorselector (toutes les couleurs en un seul écran)
colordb (excellent pour constituer une palette de couleurs)

Un effet décoratif : superposer des images de fond

Vous avez peut-être remarqué que, sous les bandeaux supérieur et inférieur, le mur de livres (fixe) est plus foncé, que sous les menus du biniou il est très clair et que sous le calendrier et les autres modules il devient franchement sombre ? Cela ne résulte pas de l'emploi d'une propriété telle que background-lightness ou background-opacity ou encore background-filter (inconnues de nos services) qui affecterait le rendu du fond général de la page, mais de la superposition de plusieurs versions de la même image.

Démontage de la manœuvre :

les fonds de ces zones sont des versions retouchées de l'image originelle, toutes avec background-attachment:fixed ;
comme un fond ne déborde jamais de la zone qu'il décore, on n'aperçoit dans chaque zone qu'une fraction de l'image retouchée, fraction qui, puisque les fonds sont fixes, change quand on scrolle la fenêtre ;
comme ces fonds sont fixes (bis), ils sont calés par rapport à la fenêtre (cf. le détail important dans le premier article) ;
ils sont donc tous calés de la même manière ;
si bien que la fraction d'image retouchée se superpose exactement à l'image principale du fond de blog et produit le même effet qu'une vitre colorée et mobile posée sur cette image principale

Un très bel exemple de cette technique est (était, parce que ça change souvent) le blog de Cln – en fait, c'est ce blog qui m'a donné l'envie d'en faire autant…

Un effet pratique : changer le fond des liens au survol

Le plus simple est bien sûr de définir, dans le CSS, une image de fond différente selon l'état du lien. Cela marche très bien mais il peut y avoir un blanc avant l'apparition de la nouvelle image, notamment si vous avez vidé le cache auparavant. L'explication est évidente : le chargement n'est pas instantané.

Pour les divers boutons qui parsèment souvent une page HTML, on peut faire mieux.

Prenons l'exemple des jours du calendrier. Voici les deux versions du bouton, l'état normal btn.gif et l'état au survol btn_hover.gif , chacune de ces images s'inscrit dans un carré de 16 pixels de côté. Pour un alignement précis, chaque cellule du calendrier mesure aussi 16 pixels de haut, les liens sont en display:block pour les remplir entièrement (ils ont donc eux aussi 16 pixels de hauteur) et on centre tout le monde (liens et images de fond) sur l'axe vertical.

En définitive, le CSS ressemble à ceci :

 .calendrier td {height:16px; line-height:16px; padding:0 2px; text-align:center} .calendrier a {display:block; background:transparent url(btn.gif) no-repeat scroll center} .calendrier a:hover { background:transparent url(btn_hover.gif) no-repeat scroll center}

Deux remarques avant de poursuivre :

peu importe la répartition des pixels entre height et padding, l'important est ici la hauteur totale ;
pour a:hover j'ai répété la propriété background au grand complet, ce qui peut sembler redondant : background-image aurait suffi. Mais j'ai observé qu'IE a parfois du mal à faire le tri entre la propriété raccourcie et les propriétés détaillées, de là le recours à une technique bourrine mais efficace.

Tel que c'est écrit ça fonctionne, mais au prix d'un délai pour le chargement de la deuxième image.

Une autre solution, trouvée je ne sais plus où, consiste à combiner les deux images en une seule, comme ceci : (cette image double a donc 32 pixels de hauteur), puis à retoucher les deux dernières lignes du CSS :

 .calendrier a {display:block; background:transparent url(btn_double.gif) no-repeat scroll 50% 0} .calendrier a:hover { background:transparent url(btn_double.gif) no-repeat scroll 50% -16px}

Comment se peut-il que ça marche ? Rappelez-vous : on ne voit que la partie de l'image de fond qui rentre dans la zone à décorer. De ce fait, au repos on ne voit que la moitié supérieure. Au survol, l'image remonte de 16 pixels et sa moitié inférieure apparaît :

Mignon, non ? et très efficace. De plus, en rassemblant les deux images en une, on gagne en facilité de maintenance. On gagne aussi un peu de temps de chargement, pas à cause des quelques octets économisés sur la taille totale mais du fait qu'on n'émet qu'une seule demande de fichier au lieu de plusieurs.

Ultime raffinement : rien ne vous interdit de faire une image à trois états pour gérer aussi les liens a:visited déjà visités…