Le format PNG

Le PNG est format d’enregistrement d’image destiné à remplacer le format GIF dans sa version 8 bits. La version 24 bits en RVBa — qui comprend plus de 16 millions de couleurs — autorise jusqu’à 256 niveaux de transparence très utiles en webdesign pour superposer deux images dont celle du dessus laisse transparaitre celle du dessous.

Malheureusement, IE6 ne comprend rien à ces différents niveaux de transparence : il faut ruser, c’est usant. Certains préconisent la dégradation grâcieuse : utiliser la transparence dans les navigateurs qui la prennent en charge et servir autre chose au dernier de la classe : un PNG 8 bits avec une seule couleur de transparence, fusionner les deux images censées se superposer, voire même utiliser une image légèrement différente.

Après tout, les visiteurs ne sont pas toujours des développeurs web utilisant plusieurs versions de navigateurs pour traquer la moindre différence de rendu. Si vous pouvez vous le permettre, foncez ! Dans le cas contraire, il faudra recourir à des solutions plus ou moins fonctionnelles selon que l’image en question se trouve placée en background d’un élément (une div, par exemple) ou dans une balise img. Si votre image transparente est placée sur un fond uni, il reste la possible de modifier l’image par voie logicielle :

Modifier le chunk (segment) bKGD des png

Un image au format PNG est composée de différents segments (chunks) dont le fameux bKGD qui spécifie une couleur de fond par défaut. A noter que les agents utilisateurs (navigateurs, logiciels, etc.) ne sont pas tenus de respecter cette couleur et peuvent en utiliser une autre. Dans IE6, cette couleur se rapproche d’un gris-vert tirant sur le turquoise…

Certains logiciels comme TweakPNG permettent de modifier la valeur de bKGD. Si vous disposez d’un fond de couleur uni, il suffit d’y mettre la couleur du fond sur laquelle est placé votre image contenant des zones transparentes.

Dans le cas contraire, les filtres Microsoft sont nos amis :

Le filtre `AlphaImageLoader` de Microsoft

Internet Explorer (depuis la version 5.5) inclut un mécanisme de filtres propriétaires filter dont AlphaImageLoader qui gère la transparence des png 24 bits. L’utilisation du filtre diffère selon que l’image est appelé via la balise img ou en tant que background d’un autre élément.

Appliqué sur une balise `img`

Applique le filtre sur les images dont la classe CSS est .img_png à l’intérieur d’une feuille de style réservée à IE6 avec les commentaires conditionnels. Il suffit de renseigner la source de monImageTransparente.png dans la variable src :

.img_png {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='image');
}

Appliqué sur une image en `background`

Pour les navigateurs tenant compte de la transparence, vous aurez la règle CSS :

.div_png {
    width: 100px;
    height: 150px;
    background: url(../pix/monImageTransparente.png) no-repeat;
}

.div_png {
    width: 100px;
    height: 150px;
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pix/monImageTransparente.png', sizingMethod='scale');
}

• image – Réduit ou élargit le bloc pour correspondre aux dimensions de l’image (valeur par défaut),
• scale – Etire l’image aux dimensions du bloc,
• crop — Rogne l’image pour qu’elle tienne dans le bloc.

Quelques contraintes

1. La source de l’image doit être relative au document HTML qui l’affiche et non à la feuille de style CSS qui la réclame. De sorte qu’une image se trouvant dans un dossier images appelée dans un fichier CSS se trouvant dans un dossier css ne devra plus se trouver sur le chemin ../pix/monImageTransparente.png mais sur pix/monImageTransparente.png.

2. Les liens contenus dans un élément HTML possédant une images de fond transparente ne sont plus cliquables, les champs input ne sont plus accessibles et le texte n’est plus sélectionnable. Une manière générale d’y remédier est d’ajouter une déclaration du type :

   
   .div_png a,
   .div_png input {
       position: relative;
       z-index: 1;
   }
   

   Pour plus d’information sur cette question, lire le fil de discussion paru sur le forum d’Alsacréations et la synthèse rédigée par Frank Galey.

3. Il n’est pas possible d’utiliser les propriétés background-repeat et background-position avec une image PNG transparente en background.

4. Il est difficile d’utiliser des événements de style rollover pour permuter des images de fond au passage de la souris.

Passez-moi l’expression !

C’est assez contraignant. Heureusement, le web est rempli de gens de bonnes volonté qui se sont retroussé les manches pour nous offrir des solutions sur un plateau. Voyez plutôt :

* html img,
* html .png {
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Le * html est là uniquement pour cibler IE6. Vous pourrez donc vous en passer si vous utilisez une feuille de style dédiée à ce navigateur. Ne fonctionne pas si Javascript est désactivé. Nécessite une image transparente de 1px de côté (transparent.gif).

Note : il sera peut-être nécessaire d’ajouter un z-index: 1; pour éviter les problèmes de liens, d’éléments de formulaire ou de sélection de texte évoqués plus haut.

Une solution globale avec iepngfix

Il existe de nombreux scripts permettant d’automatiser avec plus ou moins de bonheur cette gestion de la transparence des images PNG. Ils mettent tous en oeuvre le filtre AlphaImageLoader soit dans un fichier Javascript, soit dans un fichier HTC. Parmi tous les scripts existants, j’ai retenu iepngfix de TwinHelix que m’a conseillé Oncle Tom sur Twitter.

Ce composant HTC gère la plupart des contraintes énoncées plus haut, y compris l’absence de prise en compte de background-repeat et background-position dans iepngfix version 2.0 Alpha 3.

Le script est très simple à utiliser :

1. Copiez les fichiers *iepngfix.htc* and *blank.gif* dans le dossier de votre site web,

2. Copiez la déclaration CSS suivante dans votre feuille de style ou votre fichier HTML :

       img, div {
           behavior: url(iepngfix.htc);
       }
   

   Vous pouvez placer dans ce sélecteur CSS toutes les balises HTML, les identifiants ou les classes pour lesquels vous désirer activer la gestion de la transparence des PNG. Séparez-les simplement par une virgule.

3. N’oubliez pas que le chemin vers les fichiers *iepngfix.htc* et *blank.gif* est relatif au document HTML et non à la feuille de style CSS.

4. Si votre site est composé de sous-dossier, n’hésitez pas à ouvrir le fichier *iepngfix.htc* dans un éditeur de texte pour modifier la variable `blankImg` afin de la faire pointer vers votre pixel transparent. Par exemple : `IEPNGFix.blankImg = ‘/images/blank.gif’;`

   Cette fois encore, le chemin doit être relatif au document HTML. Si vous désirez activer la prise en charge des propriétés *background-repeat* et *background-position* assurez-vous d’inclure le fichier Javascript *iepngfix_tilebg.js* dans votre document HTML :

   <script src="iepngfix_tilebg.js" type="text/javascript"></script>
   

5. Dans certains cas, il sera nécessaire d’envoyer le bon type MIME à Internet Explorer 6. L’auteur du script a prévu un fichier *iepngfix.php* qui inclut le fichier *iepngfix.htc* tout en renvoyant le type MIME `text/x-component` associé aux fichiers `.htc` :

       img, div, a, input {
           behavior: url(/css/resources/iepngfix.php);
       }
   

6. Pour améliorer les performances, soyez le plus sélectif possible : préférez un `#img_header` ou un `.img_png` à l’utilisation de la balise `img` seule, sauf bien sûr si toutes vos images ont besoin du script !

7. Il se peut que le fond gris-vert apparaisse brièvement lors du chargement de l’image. Si vous ne voulez pas ce comportement (notamment sur les grandes images), vous n’aurez qu’à revenir à une utilisation « manuelle » du filtre *AlphaImageLoader* comme indiqué dans la première partie.

   N’hésitez pas à consulter le fichier *iepngfix.html* présent dans l’archive *.zip* qui apporte une palanquée d’informations, de trucs et d’astuces pour utiliser le script et remédier aux problèmes d’utilisation.

Une nouvelle solution globale avec DD_belatedPNG

DD_belatedPNG semble faire l’unanimité autour de lui pour sa légèreté et son efficacité, y compris lorsqu’on l’utilise avec background-position ou background-repeat. Le script s’utilise très simplement :

<!--[if IE 6]>
    <script src="DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('.png_bg');
    </script>
<![endif]-->

<script type="text/javascript">
// <![CDATA[
             DD_belatedPNG.fix('.example1, .example2, img');
// ]]></script>

Conclusion

Ce sujet semble inépuisable, ce qui n’est pas mon cas. Je laisse cet article en version bêta pendant quelques temps histoire de laisser décanter le sujet : il serait étonnant que des erreurs ou inexactitudes ne se soient pas glissées sous le tapis de souris ;)

Ressources externes

Généralités sur le format PNG

Gérer la transparence du PNG par voie logicielle

Ce logiciel permet d’accéder aux informations contenues dans un fichier PNG dont notamment le chunk (segment) bKGD pour modifier la couleur de fond sur laquelle s’applique la transparence (un fond gris/vert/turquoise par défaut dans ie6). Vous trouvez quelques explications concernant son utilisation sur

Logiciel très pratique et simple d’emploi pour améliorer la compression des images au format PNG. Il suffit de faire glisser les images que vous voulez améliorer et le PngOptimizer s’occupe du reste. Possède quelques options pour manipuler les chunks ou garder une version de l’image d’origine.

C’est peu connu, mais les spécifications du format PNG 8 bits autorisent plusieurs couleurs dans le segment Alpha, ce qui permet de spécifier plusieurs couleurs transparentes en utilisant un logiciel approprié comme Fireworks. Voilà une bonne technique pour s’autoriser une dégradation grâcieuse des images transparentes sous Internet Explorer 6 !

Un peu hors-sujet par rapport à la transparence des PNG, je signale l’existence d’un plugin pour Photoshop qui permet d’optimiser le poids des images PNG : le plugin installé par défaut dans Photoshop ne rend pas vraiment justice aux possibilités de compression de ce format.

Quelques scripts

Version 1.0 et version 2.0 Alpha 3 du script iepngfix. Gère les background-repeat et background-position dans la version Alpha à l’aide d’un fichier Javascript supplémentaire.

Ce script est proposé par Yves Van Goethem. Nombreuses options disponibles réservées à un public averti ;)

Fichier Javascript gérant la plupart des pièges posés par l’application du filtre AlphaImageLoader.

Avec Unit PNG Fix pas besoin de définir des classes ou de cibler vos éléments. Fonctionne avec les balises img ou sur les background-image. Très léger. Merci à 13sportif pour le lien.

Expression Javascript permettant de gérer la transparence des PNG en img ou en background

Script très léger et pratique. S’applique à toutes les images PNG de votre document. Toutefois, certaines images restent en mode téléchargement alors quelles sont bien affichées, ce qui peut donner l’impression au visiteur que quelque chose ne tourne pas rond sur le site. Malgré tout, ce script vieillissant peut encore rendre quelques services : il m’a rappellé l’existence de l’attribut defer="defer" de la balise script qui permet de différer le chargement (ou l’application) du script en question. Voir cet article très complet sur l’analyse de defer.

Propose une version modifiée du script précédent pour les champs de formulaires `

`

Encore un Javascript à se mettre sous la souris ! Crée une balise div dans laquelle est affichée l’image traitée par le filtre DirectX :

Plus ou moins la même chose avec un composant HTC.

Une solution originale en PHP.

Autres ressources sur la transparence des PNG

La blonde propose avec pédagogie un récapitulatif des différentes méthodes pour gérer cette transparence sur 256 niveaux.

Présente de nombreuses solutions et contournement pour afficher les images transparentes.

La FAQ du forum Alsacréations sur comment obtenir la transparence des PNG avec Internet Explorer 6

Tutoriel pour pallier les effets secondaires du filtre AlphaImageLoader en cas de positionnement absolu.

Mise en garde d’Eric Daspet sur l’utilisation des filtres : Si vous l’utilisez pour une petite icône de présentation qui apparaît vingt fois dans votre page, c’est vingt exécutions du filtres qui sont faites. À chaque exécution du filtre le rendu est bloqué, en attente. Sur Yahoo! Search en retirant AlphaImageLoader de la feuille CSS c’est jusqu’à 100ms qu’ils ont gagné (information donnée par Stoyan Stefanov sur sa dernière présentation).

Article très instructif sur la transparences du format PNG et l’application de AlphaImageLoader

Articles sur le même sujet

• Trucs et astuces CSS
• Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Nouvelle méthode de remplacement de texte par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

1. Créer un dégradé sur vos titres avec un PNG transparent. Ca ne marche pas avec IE6, mais vous pouvez toujours utiliser le script IE7.js de Dean Edwards ou un des nombreux scripts qui permettent de gérer la transparence sur 24 bits à la place du navigateur collé au radiateur ;)
2. L’excellent Sitepoint a mis en ligne une version encore bêta de ce qui s’annonce comme une nouvelle référence pour connaitre les balises HTML et leur contexte d’utilisation. Via Chris Heilmann. A ce propos, je vous rappelle le non moins excellent Dictionnaire hiérarchique des balises XHTML 1.1 qui vous permettra de connaitre l’essentiel des balises et de vous renseigner sur les imbrications qu’il est possible de faire ou pas.
3. Développer en utilisant Firefox peut nuire au simple plaisir de surfer. Heureusement, Il y a Flock. C’est un navigateur « social » basé sur le moteur de rendu Gecko. Social, parce qu’il inclut une floppée de fonctions basées sur les API de Twitter, Facebook, Flickr, etc. En voici une présentation rapide et efficace par les travailleurs du web.
4. Vous envisagez d’installer WordPress 2.5 ? Prenez donc un peu d’avance en suivant le premier volet de NicoLargo consacré aux nouveautés de ce nouvel avatar de notre CMS préféré ! Lorelle à fait une check-list sur Blog Herald pour se préparer à cette nouvelle version qui s’annonce comme une version majeure : après avoir remanié la structure de la base de donnée avec la version 2.3, la version 2.5 met l’accent sur l’interface d’administration. Pour préparer le terrain, lisez également les conseil du codex himself pour migrer de la 2.3 à la 2.5 et pourquoi pas avec ceux de Joost de Valk concernant les modifications à apporter aux plugins.
5. En parlant de CMS, il y a du mouvement du côté de Dotclear : nouveau forum, nouveau site pour le printemps, nouveau blog. Je garde le meilleur pour la fin : une Release Candidate de Dotclear 2 est prévue, ainsi qu’une version 1.4. Les dates de sortie seront données d’ici la refonte du site. C’est un engagement.
6. Saviez-vous qu’on pouvait utiliser l’url de son blog comme identifiant OpenID ? La marche à suivre chez Rémi Prévost. J’en profite pour vous rappeller qu’il est également possible d’utiliser l’adresse de son compte WordPress.com. Vous savez, celui qui vous sert à obtenir votre clé Akismet ;)
7. Pour finir, la solution ultime pour « monetiser » votre blog :D

Articles sur le même sujet

• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org
• Améliorations cosmétiques et ergonomiques sur ce blog
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Trucs et astuces CSS
• Liens utiles pour l'intégrateur HTML / CSS et le développeur web

J’aime bien l’expression et l’attitude d’Estéban sur cette photo, mais je trouve que l’environnement n’est pas à la hauteur. C’est pourquoi, inspiré par la position du bras à gauche sur l’image, je commence à chercher un visuel possédant des perspectives qui pourraient s’accorder. En attendant, je commence à détourer le bonhomme.

Le choix de l’outil le mieux adapté pour le détourage débute par une rapide analyse du visuel : deux zones distinctes se dégagent : le tee-shirt et les bras qui offrent des courbes relativement aisées à suivre à la Plume d’une part, et les cheveux d’autre part, dont la coiffure Made in Ocean nécessitera un travail plus élaboré.

L’outil Plume

Malgré ces différences, j’attaque avec la Plume en suivant au plus près la première zone, puis en schématisant la chevelure sur laquelle je reviendrais plus tard.

A cet instant, j’ignore encore sur quel fond je placerais mini-nous. Ce qui a une importance dans la suite du travail à effectuer. En effet, la qualité de l’intégration du pokémon dans le fond à venir dépend, pour une large part, des zones qui deviendront contiguës en terme de couleurs, de luminosité, de contraste, de teinte ou de saturation.

Pour assurer un minimum de réalisme à ce photomontage, il faudra aussi tenir compte des zones plus ou moins nettes ou plus ou moins floues de mon Petit Dragon par rapport au fond. Dans ce tutoriel, l’idée générale est d’avancer le travail au maximum pour faire face à n’importe quel changement de fond de dernière minute…

Du tracé à la sélection

Sélectionnez le tracé vectoriel puis faites Ctrl + Entrée pour en faire une sélection (contour progressif à 0px et lissage activé).

Le Lasso pour les détails

Vérifiez que la sélection suit au plus près les contours et rectifiez avec le Lasso en ajoutant ou en retranchant à la sélection si nécessaire.

Lorsque le Lasso est actif, j’utilise la touche Maj pour ajouter et Alt pour retrancher. Notez que la touche Alt associée à la touche Maj permet d’ajouter à la sélection en Mode polygonal, ce qui permet d’aller plus vite dans les lignes droites. Pour utiliser ce mode pour retrancher, on inverse la sélection Ctrl + Maj + i et vice-versa…

Mémoriser la sélection

Il est temps de mémoriser cette sélection et de faire un premier test d’intégration sur fond gris. Pour cela, je crée un nouveau calque : double-clic sur le calque Arrière-plan et je fais glisser le Calque 1 dessous.

Désélectionnez Ctrl d puis remplissez avec 50% de gris (Maj + Retour chariot -> Remplir Avec).

Il faut maintenant récupérer la sélection qui se trouve mémorisée sur la couche Alpha 1 (Ctrl + clic sur Alpha 1 dans la palette des Couches).

Le masque de fusion

Dans la palette Calques, je sélectionne le Calque 0 et j’ajoute un Masque de fusion. Si le personnage se détache sur un fond gris, c’est bon ;)

On voit tout de suite qu’on ne fait pas toujours ce qu’on veut avec ses cheveux… Il s’agit maintenant de fondre la chevelure dans l’environnement. Par précaution je duplique ma couche Alpha 1 qui devient Alpha 1 copie, et je sélectionne le Calque 0 de la palette Calques.

Il est temps de dire quelques mots sur le masque de fusion. Comme son nom l’indique assez justement, il sert à fusionner des parties d’images entre elles en fonction des niveaux de gris qui servent de masque. Grosso modo, le noir rendra la zone concernée transparente, tandis que le blanc préservera la zone. Les 254 niveaux intermédiaires (soit 256 au total) serviront à moduler l’opacité nécessaire à une fusion harmonieuse de l’avant-plan avec l’arrière-plan.

Un Flou gaussien sur le masque de fusion

Je vais d’abord dégrossir le travail en ajoutant un Flou gaussien sur la chevelure. Pour celà, je vérifie que le Masque de fusion Calque 0 est sélectionné, j’active le Lasso que je lance autour des cheveux…

J’applique ensuite un contour progressif d’une vingtaine de pixels à cette sélection pour que la transition du flou se passe en douceur entre les cheveux et les contours du visage.

Ensuite, un petit coup de Ctrl h pour masquer le contour de la sélection permettra d’avoir le champ libre pour juger l’intensité du flou gaussien à venir. Un (Filtre -> Atténuation ->) Flou gaussien de 6 pixels de rayon devrait faire l’affaire.

Il reste une zone plus sombre au-dessus des cheveux. C’est le moment d’utiliser le Pinceau sur le Masque de fusion.

Un bon coup de pinceaux

Une fois l’outil Pinceau sélectionné, je choisis une forme d’une quinzaine de pixels de Diamètre, d’une Dureté à 0%, d’une Opacité à 10%, d’un Flux à 100% et j’active la fonction Aérographe. Il est temps de désélectionner Ctrl d et de s’assurer que les couleurs de premier et d’arrière-plan sont respectivement le noir et le blanc en réinitialisant les couleurs par défaut avec la touche d. La touche x permutant facilement les couleurs.

Voilà, tout est prêt pour commencer à peindre le masque sur les zones à fondre dans le gris. Pour revenir en arrière, la touche x est notre amie : si l’application de noir fait disparaître une zone, le blanc la fait revenir, et un gris à 50% lui donne une opacité de… 50% ! C’est magique.

Je n’hésite pas non plus à changer la taille du pinceau, ainsi que son opacité en cours de travail. Pour les cheveux en particulier je prend soin de faire des mouvement de pinceaux dans le sens du poil pour obtenir un résultat plus naturel. Dans certains cas, il peut être judicieux d’utiliser, sur des zones réduites, la technique du flou gaussien évoquée plus haut.

Le plus difficile dans la peinture sur Masque de fusion, c’est de s’arrêter. Pour cela, n’hésitez pas à zoomer et dézoomer sur les zones à traiter.

Et ça donne quoi, au final ?

Comme la luminosité du fond est proche du gris, il y a eu peu de retouche à faire. En revanche si le contraste avait été beaucoup plus prononcé, j’aurais certainement dû continuer à peindre sur le masque en utilisant de l’huile de coude avec les équivalents-claviers indispensables.

Changer la taille de la brosse (Clic droit dans la zone de travail), modifier l’opacité (touche Enter du pavé numérique). Touche x pour intervertir les couleurs de premier et d’arrière-plan.

Les deux visuels n’ayant pas été shootés dans les mêmes conditions, il reste un peu de travail pour harmoniser les couleurs et la luminosité. L’amélioration du contraste et l’ajout de jaune dans les tons clairs, moyens et foncés suffirait presque à donner l’impression que ce n’est pas un photomontage.

Pour la forme, un léger coup de pinceau sur le Masque de fusion, et voilà, c’est fini.

Conclusion

Pour détourer correctement un Choulala ou tout autre chose en vue d’une intégration dans un autre visuel, rien ne vaut la combinaison des différents outils que Photoshop met à notre disposition. Par ailleurs, les outils et techniques utilisés dans ce tuturiel sont disponibles dans quasiment toutes les versions de Photoshop. Ce n’est pas parce que cet article ne traite pas de développement web, qu’il faut en profiter pour oublier les standards ;)

Bon détourage !

P.S. : N’hésitez pas à marker mes tutoriels (et ceux des autres, en passant) en attente ou en homepage sur tutmarks.com ! Merci d’avance.

Articles sur le même sujet

• Trucs et astuces CSS
• Créer le logo et la charte graphique de mon nouveau blog en 4 étapes
• IE6 — Gérer la transparence du format PNG 24 bits
• Quelques notes sur la conception d'une charte graphique
• Opacité CSS et effet de trame avec GIF/PNG transparent

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;
}

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

Articles sur le même sujet

• Trucs et astuces CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Quelques notes — Programme de formation HTML & CSS
• IE6 — Gérer la transparence du format PNG 24 bits

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

• La feuille blanche
• Raccourci pratique pour les bordures CSS
• Transparence
• Commentaires conditionnels d’IE vs hacks CSS
• Barre de défilement et décalage d’une page centrée
• Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
• Centrer un bloc horizontalement dans la fenêtre du navigateur
• Modifier les caractéristiques des liens avec LoVe HAte

La feuille blanche

Document XHTML pour partir de bonnes bases :

            <title>Un titre explicite contenant les mots-clés de la page</title>



            <!--[if lt IE 7]&gt;-->


            <!--[if IE]&gt;-->

Consultez cet article d’OpenWeb pour mieux connaitre les différentes DTD et les gabarits XHTML prêt à l’emploi.

J’ajoute souvent un Reset CSS au choix pour débuter la feuille de style :

• Remise des marges à zéro avec le sélecteur universel
• Reset CSS Reloaded
• INITIAL
• YUI Reset CSS
• undohtml.css

Lire l’indispensable article de Blog & Blues pour plus d’informations sur la diminution de la taille par défaut de la police et l’utilisation de l’unité de mesure em

Quelques informations supplémentaires au sujet de la remise à zéro des margin et padding pour tous les éléments sur leftjustified.net.

On a toujours besoin d’un peu d’interactivité sur nos pages web. La bibliothèque Javascript jQuery est idéal : empreinte légère, et facilité d’utilisation, plugins nombreux, communauté réactive. Lire cette introduction à jQuery et cette liste de 240 plugins pour jQuery.

Raccourci pratique pour les bordures CSS

Ces deux propriétés CSS permettent de gérer l’épaisseur, le style, la couleur d’une bordure ainsi que les côtés où elle apparait.

.bordure {
    border: 1px solid #DF001A;
    border-width: 0 0 3px 0;
}

Cet exemple affiche une bordure de 3 pixels au bas de l’élément dont la classe est bordure. La valeur de 1px de la première déclaration CSS est surchargée par la valeur de la deuxième ligne.

Pour afficher une bordure de 1 pixel en haut et 3 pixels à gauche, il suffit de modifier la deuxième ligne comme ceci : border-width: 1px 0 0 3px;

Transparence

div.transparence {
    filter:alpha(opacity=50);
    -moz-opacity:  0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

La gestion de l’opacité est un chemin semé d’embûches. Heureusement, il existe des chemins de traverse pour pallier le manque de support des propriété standards par les navigateurs.

J’ai trouvé les 3 premières lignes chez ac-graphic.net et la quatrième chez babylon-design. La première ligne est destinée à IE, la deuxième à Firefox, la troisième est un standard en CSS3 ! et la dernière à Konqueror.

P.S. : Pour une compatibilité maximale, il est conseillé de mettre les 4 lignes ensemble.

Commentaires conditionnels d’IE vs hacks CSS

<!--[if IE]>
    <style type="text/css">
        @import "/style/pour_ie.css";
    </style>
<![endif]-->

Barre de défilement et décalage d’une page centrée

html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
}

Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur

#page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30em;
    height: 30em;
    margin: -15em 0 0 -15em;
    border: 1px solid #000;
    text-align: left;
    background-color: #990;
}

Centrer un bloc horizontalement dans la fenêtre du navigateur

#page {
    position: relative; /* optionel mais utile par la suite /
    width: 80%;
    margin: 0 auto;
    text-align: left; / optionel : reliquat d'un bug sous ie5.5 */
}

Modifier les caractéristiques des liens avec LoVe F HAte

a          { color: #CAB3A5; }
a:link     { color: #CAB3A5; }
a:visited  { color: #CAB3A5; }
a:focus    { color: #CAB3A5; }
a:hover    { color: #DB9D41; }
a:active   { color: #FFF; }

Articles sur le même sujet

• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Exercice de style CSS et HTML : table vs div
• Menu HTML et CSS, sliding doors et item current en PHP
• Opacité CSS et effet de trame avec GIF/PNG transparent
• IE6 — Gérer la transparence du format PNG 24 bits