CSS : Appliquer un effet sur une image

Mis à jour il y a 3 ans

Un tutoriel pour appliquer les effets tels que le floutage, le contraste, la saturation, le noir et blanc,... sur une image en CSS

Wilo Ahadi

Auteur

Wilo A.

Technologies

HTML, CSS
Voir aussi Un tutoriel d'utilisation du package Laravel Breeze pour mettre en place l'authentification (login, register, password reset, ...) des utilisateurs dans un projet Laravel. En savoir plus

Introduction

Qu'on veuille le contraste, l'opacité, la saturation, la luminosité ou autre effet, CSS (Feuille de style en cascade) nous propose la propriété filter pour les appliquer sur une image.

La propriété filter est actuellement supportée par des nombreux navigateurs comme nous pouvons le voir sur caniuse.com

Les effets

L'effet qu'on applique sur une image par filter est une fonction du même nom que l'effet voulu où on transmet la valeur qui détermine son intensité.

Nous avons les effets suivants :

  • blur : le floutage. On détermine sa valeur en pixel, rem, ...
  • brightness : la luminosité. On détermine sa valeur en pourcentage. Au-delà de 100% l'image est plus lumineuse.
  • contrast : le contraste (en pourcentage). Au-dela de 100% le contraste est plus fort.
  • grayscale : le noir et blanc (en pourcentage : 0% à 100%)
  • hue-rotate : fait tourner la roue de couleurs au nombre de degré indiqué. Valeur en deg (0deg à 360deg)
  • invert : inverser les couleurs (en pourcentage : 0% à 100%)
  • saturate : la saturation (en pourcentage). Plus le pourcentage est élevé, plus la couleur est vive
  • sepia: l'effet sepia (en pourcentage : 0% à 100%)

On peut appliquer plusieurs effets sur une meme image.

Exemple

Au code CSS ci-dessous, j'applique les effets "grascale (70%)", "luminosité (120%)", "contraste (70%)" puis je fais tourner la roue de couleurs à 320 deg sur une image de classe "transformed" :

img.transformed {
	filter: grayscale(70%) brightness(120%) contrast(70%) hue-rotate(320deg);
}


La capture ci-dessous montre ce que j'obtiens pour mon image de lion (image originale à gauche) :

Image d'un lion

Les limites des filtres

Compatibilité

Bien que les navigateurs actuels supportent très bien les filtres, il n'en est pas le cas pour les vieux. D'où la nécessité d'indiquer les préfixes des navigateurs :

img.transformed {
	-webkit-filter: grayscale(70%) brightness(120%) contrast(70%) hue-rotate(320deg); // Google Chrome
	        filter: grayscale(70%) brightness(120%) contrast(70%) hue-rotate(320deg);
}


Performance

Appliquer les filtres sur une image demande un peu plus de ressources que les traitements CSS courants. Utilisez-les donc à bon escient car ils peuvent un peu alourdir le chargement d'une page s'il y en a de trop. 

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil

Commentaires