CSS permet de créer des effets de désaturation sur les images, ce qui peut-être très pratique pour créer des effets de survol souris. Aux débuts du web il fallait charger 2 images différentes pour obtenir le même résultat. La propriété filter peut s'appliquer tout simplement à votre image :
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Pour cibler un peu plus précisément, on peut appliquer cet effet à toutes les images d'un div :
#desaturation img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Ou cibler les images directement en leur attribuant une classe spécifique :
img.desaturation {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Cette propriété fonctionnera sous Chrome 18+, Safari 6+ (ordinateur et mobiles), Firefox 35+, Opera 15+, et les versions récentes de navigateurs Android et Blackberry (pour Internet Explorer c'est en cours de développement). Mais on peut néanmoins ajouter un peu de code et un fichier .svg pour plus de compatibilité.
Le fichier desaturation.svg à placer dans le même dossier que le fichier css est à créer :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="noiretblanc">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>
On intègre ensuite le .svg au CSS :
#desaturation img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(desaturation.svg#noiretblanc);
}
Enfin, pour obtenir le support des anciennes versions d'Internet Explorer et de navigateurs utilisant webkit on peut aussi ajouter :
#desaturation img {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url(desaturation.svg#noiretblanc);
}
on peut ensuite appliquer un effet de passage souris pour repasser les images en couleur :
#desaturation img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
