CSS : Appliquer un effet sur une image

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) :

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.