grayscale();

Ajouter un effet noir et blanc sur vos images

Image en noir et blanc

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 :

Photo d'une fille qui regarde un lac sous le soleil"

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);
}
Photo d'une fille qui regarde un lac sous le soleil"

Effet de survol

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);
}
Photo d'une fille qui regarde un lac sous le soleil"

Une légère transition

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);
}
Photo d'une fille qui regarde un lac sous le soleil"

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

Yann Vangampelaere - nouslesdevs -

Sinon jete un coup d’oeil aux autres catégories

Ma boîte aux lettres

Tu veux me demander quelque chose ?