Blog / Article #22
Les filtres d'image CSS3 de Chrome

star

21 Mars 2013

Les filtres d'image css3 de chrome

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


Clique sur j'aime ou sur +1 en dessous et tu seras le roi d'internet promis !

Auteur de l'article
Retour a la liste