CSS et background opacity

Bien le bonjour chers lecteurs.

Ce billet est spécialement dédié aux petits Web Designer que nous sommes.

Dans notre quête habituelle de design non-convetionnels, de créativité et autres détails graphiques, il m'arrive souvent d'être attiré par des  fonds transparents contenant du texte quant à lui opaque.

Etant dans une optique d'optimisation des performances Web, j'en arrive souvent a essayer d'éviter les PNG (les images sont la sources la plus importante de chargement des pages). 

Je viens donc en cette fin de matinée vous apporter une petite solution pour créer des fonds transparents avec l'aide de mon ami CSS.

Here we are !

 .alpha60 {
/* Si le navigateur ne supporte pas le RGBa */
background-color: rgb(0, 0, 0);
/* RGBa avec une opacité de 0.6 */
background-color: rgba(0, 0, 0, 0.6);
/* Pour IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* Pour IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
} 

Voila ce que ça donne au passage de ma souris sur un produit :

Bien sur vous allez me dire, "Mais IE7 !". Et oui ! Effectivement cela ne fonctionnera pas sur IE7 à mon grand regret.

Mais j'ai envie de vous dire ! D'une part IE7 perd de la part de marché, une bonne partie étant transférée vers I8 voir 9 et de deux, si on veut que ça évolue, il faut bien obliger l'utilisateur à changer ses habitudes :).