Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
23 janvier 2012 1 23 /01 /janvier /2012 11:43

 

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 :

 

Exemple background opacity mouse outexemple_background_opacity

 

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 :).


Partager cet article

Repost 0
Published by AtChA - dans Programmation
commenter cet article

commentaires

 395149_10150485772854288_664024287_8595839_1160149945_n.jpg

Bonjour et bienvenue.

Je mé présente AtChA.

Je suis Web designer, développeur front end, community manager, gamer et donc forcément geek. Je suis basé à Poitiers.

Né dans les années 80, j'ai grandis avec la nouvelle technologie et ce blog est là pour apporter des connaissances et de la distractions aux âmes qui s'aventurent par ici.

Recherche

Catégories