Le carnet web de florence

Afin d'étendre la science de Kazo, voici un petit tutoriel pour appliquer une teinte transparente sur une zone de page web.

Commençons par le problème : Ici, le texte est difficilement lisible, mais on désire ne pas masquer l'image. On va donc appliquer une teinte, de la couleur jaune de la bordure (#f2c56c), avec une opacité de 85%.

La solution du futur

Le W3C est en train de préparer la recommandation CSS 3, qui apporte des améliorations notables pour l'opacité, comme la propriété opacity ou les couleurs RGBA (voir aussi les différences entre opacity et RGBA).

Mais cette recommandation n'est pas terminée, et est susceptible d'évoluer. Certains navigateurs n'ont pas attendu, et ont commencé à l'implémenter, parfois via des attributs propriétaires (-moz- chez Mozilla, etc). Et il n'y a aucun support de cette propriété chez Internet Explorer.

La solution du passé

Cette solution consiste à créer un fichier .gif de 2x2 pixels. Les fichiers .gif sont parfaitement gérés par tous les navigateurs depuis longtemps, aucun problème de ce côté là. Je rappelle que la transparence du format gif est binaire : un pixel peut être totalement transparent, ou totalement opaque avec une couleur. Le principe est de créer un damier de pixel coloré et transparent.

À l'aide de GIMP, il suffit de créer une image (Fichier > Nouveau...) de 2x2 pixel, avec un fond transparent.

À l'aide de l'outil crayon avec une brosse de 1 pixel, on crée le damier.

Il suffit ensuite de l'enregistrer (Fichier > Enregistrer sous) au format gif (en terminant le nom du fichier par .gif).

Pour appliquer ce damier à la page web, il suffit de modifier la feuille de style de la façon suivante :

#content {
    background: url(damier.gif);
}

Voici le résultat : Je vous l'accorde, c'est loin d'être idéal. Ça peut être utile dans certains cas, mais il faut savoir jouer sur le damier et la police du texte pour avoir un résultat potable. Heureusement, il y a mieux.

La solution actuelle

Au lieu du damier, nous allons utiliser une image au format png. Ce format est bien meilleur que le format gif, notamment grâce à son support d'une couche de transparence. Mais hélas, cette transparence n'est pas très bien gérée par Internet Explorer dans ses versions d'avant la 7.

Création du fond

Nous allons créer un fichier de 1x1 pixel (qui sera répété sur tout le fond de la zone concernée, vu qu'il est uniforme, autant le faire de la taille la plus petite pour accélérer le téléchargement de la page). On commence par choisir nos couleurs dans la fenêtre d'outils de GIMP : Plaçons dans le premier rectangle (la couleur de premier plan) la couleur à partir de laquelle nous souhaitons réaliser la teinte, et dans le second la couleur qui sera affichée par Internet Explorer 6 et précédent (ici du blanc). On choisit la couleur en cliquant sur le rectangle, notez le cadre qui permet de coller directement une couleur html.

Ensuite, on crée une nouvelle image (Fichier > Nouveau), de 1x1 pixel, en choisissant comme remplissage la couleur de premier plan :

Notre petit pixel est créé, il faut jouer avec le zoom (en bas de la fenêtre de l'image) pour y voir quelque chose. Nous allons maintenant appliquer une transparence au calque qui correspond à la couleur de fond, et qui a été créé automatiquement lors de la création de l'image. Il suffit d'aller dans la fenêtre des calques : Le réglage opacité permet de choisir la transparence du calque.

Ensuite, on enregistre l'image (Fichier > Enregistrer sous) au format png (en terminant le fichier par .png). Un message demande de fusionner les calques, on accepte. Ensuite une fenêtre d'options apparaît, veillez à ce que l'option Enregistrer la couleur d'arrière-plan, qui permet à Internet Explorer d'afficher la couleur que nous avons affecté à l'arrière plan.

Mise en place du fond pour les navigateurs modernes

Dans la feuille de style de la page, on ajoute :

#content {
    background: url(teinte.png);
}

(content représente le cadre en question sur la page, et teinte.png le chemin du fichier png créé auparavant.)

Et voici le résultat :

Et pour Internet Explorer ?

Sans rien faire, Internet Explorer devrait afficher la couleur d'arrière-plan (mais ça n'a pas marché avec mon Internet Explorer 6 émulé pour GNU/Linux, il faudrait le tester sous Microsoft Windows).

Microsoft a aussi publié un bricolage pour que les png s'affichent bien. Sauf que ça ne me semble pas vraiment donner du code valide, mais c'est le dernier des soucis de Microsoft (et mettre du code spécifique à Internet Explorer n'est jamais plaisant).

Il existe aussi la possibilité d'encadrer le code dans la feuille de style par des commentaires conditionnels. Là aussi, c'est un vilain bricolage. On peut trouver une bonne explication sur les commentaires conditionnels chez Blog and Blues. Ainsi, on peut afficher en image de fond un machin hideux avec écrit Changez de navigateur !.