mercredi 30 décembre 2009

Transparence / Opacité en CSS

Avoir des éléments transparent sur un site peux être sympa. Notamment pour redonné un petit look web2.0 à ses popup. Mais la gestion de la transparence en CSS n'est pas gérer de la même manière dans tout les navigateurs. Certain me diront d'attendre l'arrivé de CSS 3.0, pour avoir accès à ses nouvelles propriétés. Mais moi je trouve dommage d'attendre alors que beaucoup de navigateurs modernes les supportent déjà.Voici donc un petit bout de code CSS pour faire de la transparence en HTML à l'aide des CSS:

 .monLayer{
opacity: 0.7; /* Modern Browsers */
-moz-opacity: 0.7; /* Netscape */
-khtml-opacity: 0.7; /* Safari 1 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
filter: alpha(opacity=70); /* IE 5-7 */
}
Je dois cependant vous mettre en garde. L'élément HTML ayant la class "monLayer" seras transparent, mais également tout les enfants de cet élément. A l'heure actuel je n'ai pas trouvé de solutions pour résoudre ce problème. Si ce n'est attendre le support des couleurs RGBa qu'apporteras CSS3.

0 commentaires: