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

Linkographie. Effet de trame et d’opacité

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