Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

lundi 23 juin 2008

Un filtre de couleur pour ses photos noir blanc

En complément de l'article Opacité et transparence - Appliquer un filtre, une petite astuce pour appliquer un filtre de couleur à ses photos noir blanc.

Rappelons que le taux d'opacité varie de 0 à 100 sous Internet Explorer et de 0.0 à 1.0 sous Firefox. Une opacité de 80% filtre 20% de lumière.

1. L'image de base

Utilisons l'image de base comme fond d'un bloc div :



<div
style="width: 240px; height: 207px;
background-image: url(URL image de base)">
</div>



240px et 207px étant les dimensions de l'image originale. On obtient :






2. L'application du filtre

Sous Internet Explorer, il faut appliquer un filtre alpha, et utiliser l'instruction opacity sous Firefox



<div
style="width: 240px; height: 207px; filter:alpha(opacity=80);opacity:.80;
background-image: url(URL image de base)"></div>








3. La source de couleur

Créons la source de couleur avec un bloc div de la taille de la photo, de couleur rouge orangé (orangered - #ff4500)






Ce bloc source va servir de conteneur à l'image de base, ce qui donne comme code :



<div style="width: 240px; background-color: #ff4500; margin: auto;">
<div style="width: 240px; height: 207px;
filter:alpha(opacity=80);opacity:.80;
background-image: url(URL image de base)"></div>
</div>



Et le résultat, la photo en sépia :




La même photo, en utilisant le vert (#007700) comme source de couleur :







6 commentaires:

Anonyme a dit…

Pas mal le résultat en aposant le filtre orange.

L'Atelier des Petites Choses a dit…

Bonjour

Pour ma part, je cherche à rendre translucide l'arrière-plan où "reposent" mes billets et gadgets (fond rouge sombre), afin que l'on puisse apercevoir le background.

Le code est-il le même ? Si oui, où le placer, si non comment faire ?

J'ai rencontré des difficultés à appliquer le code donné ici, car c'est toute la pge centrale qui devenait translucide :/ (billets et gadgets et arrière-plan)

Prac a dit…

Bonsoir

@Vouvou : sans l adresse de votre blog, je ne peux pas vous aider

Jacquesmk2 a dit…

Bonjour,
J'aimerais rendre le fond des billets semi-transparent, afin l'on puisse observer la photo d'arrière-plan...comment faire ?
Ou chercher ?
Comment reperer la balise html "incriminée" (je suis novice)
je vous remercie
http://jacquesmk2.blogspot.com

Prac a dit…

Bonsoir

@jacquesmk2

parametres / Presentation / Edition HTML

Juste avant ]]> mettez

.date-outer
{
background-color: transparent
}

pour un fond des messages transparent. Pour qq chose de semi transparent créez une image png semi transparente et mettez

.date-outer
{
background: transparent url(URL image png semi transparente);
}

Cdt

Jacquesmk2 a dit…

Merci Viti-vino