Opacité CSS et effet de trame avec GIF/PNG transparent

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Opacité CSS et effet de trame avec GIF/PNG transparent

Exemple d'opacité CSS et effet de trame avec GIF/PNG transparent Pour obtenir un effet d’opacité sur un élément, il existe le format d’image PNG 24 bits qui accepte jusqu’à 256 niveaux de transparence. Malheureusement Internet Explorer 6 ne prend pas en charge cette intéressante caractéristique… Je vais vous proposer une méthode full CSS et une autre permettant d’utiliser des images GIF ou PNG transparentes de manière créative avec une page d’exemples à la clé.

Effet de transparence avec CSS

En attendant la version 7 d’Internet Explorer censée résoudre le problème, nous pouvons regarder ce que propose CSS :

 .trans50 {
     filter: alpha(opacity=50);
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
}
Cette déclaration permet d’appliquer une opacité de 50% à l’élément dont la class est trans50. La première ligne appartient à Internet Explorer, la deuxième à Mozilla, la troisième à Konqueror (donc Safari) et la dernière fait partie des standards CSS3 !

L’ensemble, bien que non-valide d’après les validateurs CSS, n’en est pas moins très efficace. A un détail près : il semble qu’Internet Explorer n’applique pas l’opacité sur un élément ne possédant pas de largeur explicite ou dont la largeur est égale à width: auto.

Ces quatre lignes permettent d’appliquer un effet de transparence paramétrable à n’importe quel élément. Qu’il s’agisse d’appliquer une opacité à un aplat de couleur se trouvant au-dessus d’une photo, ou à une photo se trouvant au-dessus d’un aplat de couleur, ou, pourquoi pas, d’appliquer l’opacité à une photo par dessus une autre… Rien n’est permis (question validateur), mais tout est possible ;)

Effet de transparence avec une image GIF ou PNG

Pour obtenir un effet d’opacité, je me suis rendu compte que l’on pouvait également utiliser un GIF ou un PNG transparent et laisser transparaitre l’image de fond à travers les mailles du filet. Très simple à mettre en oeuvre, cette technique est très puissante en ce qu’elle permet d’obtenir de très beaux effets de transparence, tout en laissant la possibilité de jouer sur le point de trame.

Je vous laisse avec un aperçu des possibilités offertes par les CSS et les GIF ou PNG transparents pour obtenir des effets d’opacité. Comme toujours, n’hésitez pas à afficher le code source de l’exemple.

Télécharger le fichier .html ou .php et les images

A propos de PNG
http://www.libpng.org/pub/png/
Le site de l’inventeur du PNG. Indispensable.
http://openweb.eu.org/articles/png_vs_gif/
Très bonne source d’information sur le format PNG en français.
http://www.chevrel.org/fr/carnet/…
Encore un peu de pédagogie !
A propos des effet de transparence
http://www.babylon-design.com/site/…
Blog sur le développement web et les css en particulier qui m’a été fort utile

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



5 commentaires pour “Opacité CSS et effet de trame avec GIF/PNG transparent”

  1. skippyzrnr dit :

    Excellent tout ca, enfin une opacité "compatible" je vais tester ca de suite…

  2. Mahiou dit :

    Merci, j’ai trouvé votre astuce trés utile .

  3. br1o dit :

    Merci pour votre participation ! (A ce propos, j’en profite, pour glisser un billet de J. Nielsen : http://www.useit.com/alertbox/pa... ;)

  4. wildpeaks dit :

    SI, on peut utiliser des png transparentes dans IE…. Il le prend juste pas par defaut, suffit de rajouter le filtre dans les parametres du CSS, c’est tout.

    Exemple: http://www.seloh.com/png/pages/e...

  5. Freak0 dit :

    Damned éxactement ce qu’il me fallait je trépignait d’impatience craignant devoir poireauter jusqu’à la sortie de la CSS3 …

    Mais non et gâce à vous.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site