Comment créer un fond semi-transparent pour vos articles ?

La question se trouve dans tous les forums, les tagboards et les commentaires. Une réponse s'impose donc.

Les explications s'appuient sur le logiciel Photoshop, mais celà ne doit pas trop différer suivant celui que vous utilisez.

Tout d'abord, crééz un fichier image, en définissant l'arrière-plan comme "Transparent".

Ensuite, sélectionnez l'outil "Pot de Peinture" ainsi que la couleur que vous souaitez utiliser.

Réglez alors l'opacité que vous voulez donner à votre fond. (Plus le pourcentage sera élevé, moins votre fond sera transparent).

Appliqez alors l'outil "Pot de Peinture" à votre fichier et enregistrez celui-ci sous le format .PNG (ou .GIF) sinon la transparence ne sera pas prise en compte.

Uplaodez ce fichier et insérez l'url dans votre module d'habillage ou dans votre feuille de style.

Et voilà, ce n'était pas si compliqué ;)

Par defouloir le 13 février 2007 à 21:04

Merci, comme ça jaurai pas a l'expliqué. Il y a toujours la commande ' opacity ' pour le fond, mais elle ne marche que sous IE puisqu'elle s'appuie sur une faille du logiciel.

Par Oualalaradime le 13 février 2007 à 21:12

Oui, c'est vrai. Mais bon ... IE, voilà quoi ^^
J'aurais aussi dû précisé que certains naviguateurs ne prennent pas en compte la transparence (les vieilles versions d'IE par exemple ...)

Par cuculapraline le 14 février 2007 à 9:46

Et si le fond semi-transparent que l'on veut faire on aimerait qu'il s'applique à une image et pas seulement à une couleur ?

Par Oualalaradime le 14 février 2007 à 11:44

A ce moment-là, il suffit simplement de régler l'opacité du calque contenant ton image, et comme pour le fond semi-transparent, de l'enregistrer sous format .PNG ou .GIF afin de conserver les informations sur la transparence.

Par cuculapraline le 14 février 2007 à 17:51

Merciii.

Par jeux-deux-maux le 15 février 2007 à 13:50

euh je vais faire ma chieuse mais moi j'ai photofiltre .. ça marche pas pareil donc j'arrive pas :'( je suis vraiment qu'un boulet :'( désolé mais si vous pouviez expliquer comment on fait avec photofiltre ça serais vraiment tres gentil :) ayez pitié d'une pov' boullette comme moi ^^

Par OMalley le 15 février 2007 à 21:12

ou sinon ya ça:
"Dans ta feuille de style CSS à Article tu rajoute la ligne -moz-opacity:.80 ;
tu peux modifier la valeur du 80 ça fait + ou - transparent. Et à background color tu mets la couleur que tu veux à moitié en arrière plan.
Je sais pas si j'ai été très claire :)
Oh,oui, et puis ça marche que sous Mozilla, c'est un autre code pour IE.... il est sur sakatruc mais j'men rapelle plus :( Enfin, bref t'es quand même obligé de chosir l'un ou l'autre, t'peux pas avoir les deux."
Par Hangar.a.BatoOos
;-)

Par il.est.temps le 16 février 2007 à 17:00

Aussi non il y a un moyen plus rapide ===>http://lab.rails2u.com/bgmaker/" onclick="window.open(this.href); return false;">http://lab.rails2u.com/bgmaker/

;D

Par il.est.temps le 16 février 2007 à 17:02

Aussi non il ya une moyen plus rapide pour faire les fonds transparent:
http://lab.rails2u.com/bgmaker/" onclick="window.open(this.href); return false;">http://lab.rails2u.com/bgmaker/

Voila =)

Par Hangar.a.BatoOos le 17 février 2007 à 11:54

>O Malley : lol^^
Sinon le nouvel habillage de Sakatruc est magnifique, mais comme tous les habillages d'Oulalaradime :)

Par MiNi-CaCtUs le 19 février 2007 à 10:12

Merci, [par contre ça ne serait pas bete d'augmenter la police des commentaires^^]

Par acid6trik le 22 février 2007 à 11:57

Ou alors, on peux rajouter :
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
Dans le code CSS, je ne suis pas sur, mais il me semble que ce code créait la transparence même s'il y a une image (à vérifier) mais sinon pour les fond uni ça marche super bien ^^(j'espère que l'astuce n'était pas déjà présente sur le blog (j'n'ai pas encore tout visiter faut dire ^^)

Par Requiem-For-A-Clarinet le 22 février 2007 à 12:39

Oui, j'suis d'accord, c'ets pas plus simple : filter: alpha(opacity=XX); ?

Par acid6trik le 23 février 2007 à 1:44

oui, enfin c'est plus simple (pour les feignant dans mon genre :D) mais c'est chiant si on met des codes flash (ou autre) par deçu parce que l'opacité s''y aplique égallement (dixite latement) alors j'le déconseille quand même et merci pour l'astuce qui m'a servis pas plus tard qu'aujourd'hui ^

Par jimplore.votre.pardon le 24 février 2007 à 19:47

Bon je vais être un peu chiante, mais j'ai suivi les consignes et j'ai un joli fond semi-transparent mais lorsque vient le moment de l'enregistrer ça pose problème. Lorsque je l'enregistre en .gif j'obtiens un fond entièrement transparent et lorsque je l'enregistre en .png j'obtiens un fond gris... j'ai fait une bétise? Il y a une solution?

Par F-Ups le 3 mars 2007 à 2:37

Pas béte ce truc c'est tout je le fait dans photo filtre studio on peut ^^

Par Sega le 16 mai 2007 à 16:35

Chez moi, je n'arrive pas à uploader mon image, seulement la copie que me fait faire obligatoirement photoshop, et quand je l'insère dans ma feuille CSS, ça me donne un fond d'article gris assez moche...
Au secours.

Sakatruc

Bidouillage, Bricolage ... Créé par vous, et pour vous.

Tutorials & Articles - recently added

Sponsors

Auteurs

Mots-clés

Rechercher dans ce blog

Catégories

Communiquer

A surveiller:

Articles