Un fond translucide pour vos articles

Publié le par PêUR

Mise à jour le 01/05/2006 22:39

Cet article a pour but de vous expliquer comment créer un fond translucide à vos article pour ne pas masquer entièrement votre background de blog

Certain d'entre vous sont peu enclin à masquer leur magnifique background de blog par une couleur de fond sur les articles.

Une couverture légèrement translucide semble être une bonne solution. L'idéal serait d'utiliser la transparence d'une image au format png dans le fond d'article. Cependant si Firefox, Mozilla et Opéra gèrent très bien la transparence des png, Internet Explorer ne les gère pas du tout et vous risquez de vous retrouver avec un fond opaque gris.

Quant aux gif, ils ne permettent qu'une transparence d'1bit, ce qui signifie que les pixels peuvent être totalement transparent ou totalement opaque.

Oui mais alors, comment faire?

L'astuce consiste à tromper l'oeil et à lui faire interpréter un tout petit gif transparent comme une surface semi-opaque. Un motif en damier de pixel noir et transparent apparait comme une surface noire à demi translucide, lorsqu'il est répété sur une grande surface. 

Image semi-opaque
Image de 8x8px agrandit

Ci-dessous un exemple avec un background vif. Fig. 1, le texte est difficilement lisible,  Fig. 2,  avec cette pseudo-opacité le texte est plus accessible.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris consequat vulputate sem. Etiam nec nisl. Morbi mauris eros, tempus non, accumsan eu.


Fig. 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris consequat vulputate sem. Etiam nec nisl. Morbi mauris eros, tempus non, accumsan eu.


Fig. 2

Pour installer un tel fond en background de vos articles, il suffit de rajouter la propriété background avec l'url de l'image correspondante dans votre code CSS:

CSS

.article { [Ne pas toucher ce qui existe déjà]; background: url(http://url_image_semi_opaque) }


Si vous n'avez pas de logiciel de dessin adéquat ou ne savait pas faire une telle image semi-opaque, vous pouvez la récupérer ici en faisant un clique droit sur le lien puis "enregistrer la cible sous". Il ne vous suffit plus qu'à l'uploader sur votre espace de stockage Over-blog. Pour récupérer son url afin de l'installer dans votre CSS, vous pouvez lire cet article

 

S'il vous plaît,  ne copier/coller pas l'image semi-opaque, ne récupérer pas son url pour l'utiliser directement dans votre CSS. Si vous procédez ainsi, la bande passante du serveur sur lequel se trouve l'image va être fortement solicité, vous allez avoir des soucis d'affichage et je serais dans l'obligation de déplacer l'image pour éviter les hotlinks. En plus elle ne pèse que 53 octets!!!

Des exemples

 

Liens connexes

 

Publié dans Faq

Commenter cet article

Chen Jie 14/07/2007 16:22

encore une fois tes méthodes m'aident énormément!! ^___-
merci encore!!
au passage, j'ai changé la couleur du gif, et en vert pâle ça donne pas mal!! ^__^

mais que ferais-je s'il n'y avais pas PêUR!!! Je me l'demande!

PêUR 14/07/2007 20:20

:)

mahina 08/03/2007 18:26

merci.... tout plein... :)

PêUR 08/03/2007 18:38

:)

mahina 08/03/2007 14:39

Peur...pour faire ce genre de chose uniquement dans un seul article..je l'ai fait il y a si longtemps que je l'ai oublié: écrire sur une image de fond juste pour un article, merci tout plein....

PêUR 08/03/2007 16:04

En mode source dans l'article, encadre l'article comme suit:
...Le code de ton article...

jule pilpus 19/01/2007 11:12

MERCI ! MERCI ! MERCI, PêUR, tu m'as été d'une aide précieuse, moi qui luttais désespérément pour que mes modules ne soient pas noyés dans mon fond d'écran.
Ta méthode est géniale, surtout quand on est tombé sur l'article de fransisek - http://www.francisek.com/article-1354075.html - et que forcément, on est abbattu....
Merci encore, et si t'as l'occasion de venir faire un tour sur mon blog pour admirer une mervielleuse transparence, tu es le BIENVENU...

PêUR 22/01/2007 22:48

;-)

triella 11/11/2006 15:20

a dac merci
mais heu sur le lien du message 15 je en vois rien...

PêUR 11/11/2006 22:21

C'est normal, il est transparent et blanc!
Pour le "voir" sélectionnes toute la page en faisant Ctrl+A tu verras mieux où se trouve l'image. clique droit dessus puis enregistrer sous