Blog / Article #22

Les filtres d'image CSS3 de Chrome

Les filtres d'image CSS3

Aujourd'hui, les filtres CSS3 pour les images ne fonctionnent que dans Chrome mais puisque c'est quand même amusant de jouer avec, voici la liste complète histoire de voir ce qu'on va pouvoir faire simplement a la volée sans passer par Toshop'...

.blur {-webkit-filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.35);}
.contrast {-webkit-filter: contrast(140%);}
.grayscale {-webkit-filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);}
.opacity {-webkit-filter: opacity(60%);}
.saturate {-webkit-filter: saturate(4);}
.sepia {-webkit-filter: sepia(100%);}

Dans le cas ou vous voudriez vous tenir prêts pour le futur, vous pouvez aussi viser les autres navigateurs avec ces préfixes top secrets...

-moz-filter: nom-du-filtre;
-o-filter: nom-du-filtre;
-ms-filter: nom-du-filtre; 

Vous trouverez quelques exemples ici :
http://www.web-expert.it/summer-lab/css3-filters/holidays-colours.html