Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

11.11.2009

Afficher un arrière-plan translucide sur une image de fond

C'est certainement du B-A-Ba pour les graphistes et autres web-designers, mais il a fallu que je trouve un blog utilisant l'effet que je cherchais pour comprendre. Vous avez trouvée une chouette image d'arrière-plan, mais l'on n'arrive plus à vous lire sur ce fond. L'idéal serait de pouvoir l'atténuer, le descendre (ah pardon c'est en papier ça), pour gagner en lisibilité sans trop perdre en décor.

En jetant un œil aux récents candidats du Very Nice Blog, j'ai découvert le blog Arkino 3.0 qui propose d'explorer le Concept Abstrait de l'Optimisme Relatif. Il n'y a pas que la poésie du titre pour valoir le détour, et je pourrais vous parler de sa mise en forme originale et sans trop de fioritures, d'un graphisme sympathique et soigné sans être précieux... Mais je ne vous parlerai que d'un détail, d'une anecdote, un rien du tout pourtant très utile.

Visitez-le et vous verrez, entre autres choses, que les éléments de colonne sont encadrés en pointillés (ça on sait faire) avec un fond translucide qui permet de voir l'image d'arrière plan. Et ça, je ne savais pas.

(Cette note créée le 15/09/09 a été mise à jour le 11/11/09, avec la publication de Créer une image image translucide)


- Une image en JPEG ne gère pas la transparence.
- Une image en GIF peut être, au pixel près, transparente ou opaque, sur un mode binaire. Vous pouvez toujours essayer d'utiliser un arrière-plan avec une image de 2X2 pixels dont 2 seulement seront blancs pour créer une transparence alternative. On voit le fond, et votre texte s'appuie sur une couleur constante... Mais vous avez une trame assez inconfortable, le gain est nul.

Une image en PNG gère plus que la transparence, elle gère le degré d'opacité. C'est donc plus ou moins transparent, un peu comme un verre que vous plus ou moins dépoli.

69.png[  ] L'image ci-contre n'est pas une variante de la couleur de fond de mes notes. Elle a été créée dans GIMP avec un arrière plan transparent, et remplie avec du blanc (un carré blanc au début de ce paragraphe permet de comparer), alors que l'opacité a été réglée à 69%. Utilisez en une similaire en arrière plan d'élément de colonne et vous atténuerez les contraste de l'image de fond et vous retrouverez la lisibilité que vous aviez perdue avec une image un peu contrastée.

Encore merci Arkino, et bonne chance pour le concours.

 

Pour aller plus loin sur les images d'arrière-plan :
- Mettre une image en fond d'une page en CSS (background-color image attachment repeat position), chez CSSdebutant.com
- On revoit les bases : la propriété « background », par Paul O'Brien chez Pompage
- Image de fond en CSS (background-image), chez Mammouthland
- Créer une image translucide avec GIMP, chez Gee Mee (vidéo)

Commentaires

Non seulement je suis extrêmement flatté d'avoir atterri dans un blog que je suis comme ça de temps à autres? Mais je suis vraiment très honoré des termes qui me sont arrivés droit au cœur. Merci infiniment pour tout ça, une bien belle surprise pour une journée de taf, assez sinistre.

:D (fier fier le arkino)

Au plaisir de vous recroiser.

Écrit par : arkino | 15.09.2009

Répondre à ce commentaire

et ça donne quoi sous IE ? Quand j'avais essayé ça posait pb...

Écrit par : Lavande | 16.09.2009

Répondre à ce commentaire

Sous Firefox et IE7 sur win XP, cela fonctionne correctement. La précision doit être donnée effectivement ;-)

Écrit par : Gee Mee | 16.09.2009

Pour compléter à fond ;)
La transparence des png est gérée par tous les navigateurs dignes de ce nom (FF, Safari, Chrome, Opera...) Il n'y a qu'avec IE6 que ça ne fonctionne pas (meurs IE6, meurs !)

On peut contourner le problème si on y tient absolument : http://www.alsacreations.com/astuce/lire/81-transparence-png-ie6.html

(et merci aussi pour la mention de mon site ! :) )

Écrit par : Pascale | 16.09.2009

Répondre à ce commentaire

Merci Pascale, ça c'est du complément !
J'ai lu la note d'Alsa, et à condition d'être un intégrateur web particulièrement motivé, il semble bien que l'on puisse jouer de la transparence avec IE6. Mais c'est un peu comme vouloir jouer du violon avec des gants de boxe, me semble-t-il.

Pour IE6, j'ai fait référence à l'article suivant à plusieurs reprises. Je trouve qu'il a quelque chose de... définitif.
http://blog.juliencrouzet.fr/2009/03/13/ie6-est-il-une-faute-professionnelle/

Écrit par : Gee Mee | 16.09.2009

Oui, effectivement, la solution du filtre pour IE6 est bien lourde. C'est pourquoi je précisais "si on y tient absolument" ;)
Pour ma part, j'aurais plutôt tendance à mettre en place une feuille de style alternative pour IE6, sans png transparent (donc moins joli), mais qui évite au moins l'affreux pavé gris.

L'article de Julien : je suis assez d'accord avec lui sur le fond. Mais le problème est que dans bien des entreprises, tout un tas de solutions ont été construite sur IE6 et les adapter à une autre plate-forme demande du temps... et donc de l'argent.

IE6 bouffe notre énergie quand on développe un site web, c'est une plaie. C'est vrai aussi que les failles de sécurité sont un réel problème.
Mais il est encore là pour un petit bout de temps et il faut faire avec. Donc, je suis pour sa disparition, mais je ne lance pas la pierre à ceux qui l'utilisent encore, car il ne peuvent pas forcément faire autrement.

Écrit par : Pascale | 16.09.2009

Répondre à ce commentaire

Voilà une position équilibrée comme je les aime, sans ironie, cela étant vous me permettrez quelques remarques complémentaires.

Ici, j'essaie de dire comment personnaliser son blog Hautetfort. À ma connaissance, nous n'avons pas la possibilité de gérer plusieurs feuilles de styles. Ce serait déjà pas mal d'en avoir une simplifiée pour l'impression. Il faudra donc assumer le risque d'une éventuelle incompatibilité.

Pour IE6 en général, vous avez entièrement raison, le manque de temps, d'argent, conduisent à pérenniser des situations que l'on sait instable (jusqu'à un évènement genre bug de l'an 2000 qui oblige à tout revoir - ou à faire croire que).
Pour nos blogs, la question est un peu différente, et sans jeter la pierre à l'utilisateur :
- soit ce dernier a la maîtrise de sa machine, et il serait bien inspiré de mettre à jour son navigateur, ou d'en choisir un autre adapté à sa configuration (anciennes versions de Firefox, d'Opera, etc).
- soit il n'a pas la maîtrise de sa machine... Et que fait-il là ? C'est un blog perso, il n'est pas censé le consulter du boulot ;-)

Écrit par : Gee Mee | 16.09.2009

Sont beaux mes branchages ;-) et j'essaye le truc dès que possible, encore Merci pour le tuyau !

Écrit par : Bougrenette | 17.09.2009

Répondre à ce commentaire

Pas de possibilité de mettre une feuille de style alternative externe... c'est vrai que c'est dommage.

Mais je vois qd même dans le code source des styles inline dans le head. Vous avez la main là-dessus ? C'est un peu lourd pour déclarer une feuille de style d'impression, en revanche pour une rustine pour IE6, ça peut faire l'affaire.
Même si je suis d'accord : les personnes qui surfent du boulot avec IE6 n'ont qu'à remettre ça pour le soir avec un bon navigateur ;)

Écrit par : Pascale | 18.09.2009

Répondre à ce commentaire

Oh là Pascale ! Vous présumez de mes capacités techniques ;-) Cela étant, vous excitez ma curiosité, on pourrait avoir des styles inline dans le header pour définir une feuille de style d'impression ? C'est qu'imprimer une page de blog est souvent difficile...

Écrit par : Gee Mee | 20.09.2009

Oui. Ce n'est vraiment pas ce qu'il y a de plus pratique, car une feuille de style externe alternative est toujours mieux, mais si hautefort permet de modifier le contenu du head alors c'est possible.

Il faut déclarer dans un tous les styles ad hoc.

Écrit par : Pascale | 20.09.2009

Répondre à ce commentaire

Stupide aperçu !

Je recommence (désolée !!)
<style type="text/css" media="print"></style>

Écrit par : Pascale | 20.09.2009

Répondre à ce commentaire

Encore merci pour vos commentaires enrichissants Pascale. J'ai fait des essais, peu concluants, je me permets un message privé.

Écrit par : Gee Mee | 22.09.2009

Les commentaires sont fermés.