Yes You Web !

Publié le 25 août 2018

Pour animer un peu vos sites web, nous allons vous montrer comment faire des effets sur vos images à l’aide des filtres en CSS3.

Grayscale

L’image utilisée est une image en couleur sur laquelle on applique un filtre « noir & blanc ». Ce filtre se retire quand on survole l’image. La valeur du filtre est comprise entre 0 (image originale) et 1 (noir et blanc). On peut aussi l’exprimer en %.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Sepia

L’image utilisée est une image en couleur sur laquelle on applique un filtre « sépia ». Ce filtre se retire quand on survole l’image. La valeur du filtre est comprise entre 0 (image originale) et 1 (sepia). On peut aussi l’exprimer en %.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Blur

Ici, nous utilisons une photo nette sur laquelle on applique un filtre flou. Ce filtre se retire quand on survole l’image. La valeur du filtre s’exprime en pixel, plus le chiffre est élevé, plus l’image est floue.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Drop-shadow

Avec Drop-Shadow, nous ajoutons une ombre portée autour de l’image quand on la survole. Toutes les valeurs s’expriment en pixels. Les offset-x et offset-y sont obligatoires, le blur-radius, spread-radius et la couleur sont optionnels.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Saturate

La saturation initiale est 100%. Pour sur-saturer une image, on augmente ce %. Nous l’avons fortement augmenté afin que vous voyiez bien la différence. L’image est à nouveau normale au survol.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Hue-rotate

Ici, nous jouons sur la couleur de l’image en utilisant une palette de 0 (image originale) à 360 degrés ((image originale). Testez la valeur qui vous convient, nous avons choisi 120 degrés.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Invert

Avec Invert, l’image ressemble à une photo en négatif, la photo originale se retrouve quand on la survole. La valeur du filtre est comprise entre 0 (image originale) et 1 (inversion totale). On peut aussi l’exprimer en %.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Opacity

Nous appliquons une opacité à l’image originale. La valeur s’exprime en %. Avec 0%, l’image est totalement transparente, à 100%, elle est normale.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Brightness

Ici, nous jouons avec la luminosité de l’image. La valeur s’exprime en % ou en valeur décimale. Avec 0, nous avons l’image originale, à 100%, l’image a une luminosité totale.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Contrast

Le contraste est le ratio entre les couleurs claires et les couleurs foncées. La valeur s’exprime en % ou en valeur décimale. Avec 1, nous avons l’image originale, avec 0, l’image sera complètement noire.

Yes You Web !

Code HTML

Copier

Code CSS

Copier

Conclusion

Afin que l’effet quand vous survolez l’image ne soit pas trop « violent », vous pouvez ajouter une transition sur l’image.
Nous espérons que cet article vous aura été utile. Face à la popularité de cette article, nous vous en proposons un autre avec de nouveaux effets grâce aux transformations : Appliquer des transformations à des images en css3.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !