Si comme moi tu as connu l’époque où il fallait ajouter deux images pour réaliser un effet noir et blanc, et bien sache que maintenant (enfin il y a déjà un moment mais bon…) tu peux ajouter une propriété filter sur tes images qui va te permettre de faire ça en deux ou trois lignes de code !
Je vais partir de cette image :
Pour transformer cette image en noir et blanc rien de plus simple, tu ouvres Photoshop… Mais non je rigole hein ! Applique le bout de code CSS suivant, pour définir un filtre en « niveau de gris » (grayscale) sur ton image.
img{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}Mais j’aimerais bien ajouter un effet au survol de l’image pour qu’il y ait une interaction avec l’utilisateur.
L’idée, c’est de dire que par défaut l’image est en noir et blanc (grayscale de 1) et qu’au survol, grâce à la pseudo-classe :hover elle se colorise (grayscale de 0).
img{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
img:hover{
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}C’est bien, mais est-ce que ce ne serait pas mieux avec une transition ? Je te propose d’ajouter une transition sur le filter qui va permettre d’adoucir le changement de couleur.
img{
-webkit-filter: filter(100%);
-moz-filter: filter(100%);
-o-filter: filter(100%);
-ms-filter: filter(100%);
-moz-transition-property: filter 1s;
-o-transition-property: filter 1s;
-webkit-transition-property: filter 1s;
transition-property: filter 1s;
}
img:hover{
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}Tu peux aussi utiliser SASS, couplé à une librairie telle que Compass, ça t’évitera d’écrire les préfixes pour les différents navigateurs.
25/11/2015