*
[
@
/
@
=
o
{

NOUS LES DEVS

grayscale();

Ajouter un effet noir et blanc sur vos images

Niveau : débutant(e)
</> </> </>

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-fille-lac-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);
}

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);
}

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);
}

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 -

NOUS LES DEVS

Vous aimez ce que je fais ? Vous voulez que j'en fasse plus ? dans le développement du blog.