Ajouter des effets aux images avec la propriété CSS filter

Dans les exemples ci-dessous nous baserons sur cette image

blur : Ajouter du flou

Le filtre blur applique un effet de flou à l'image. Plus la valeur est élevée, plus l'image devient floue.

Comment ça marche ?

Le filtre blur fonctionne en moyenneant la couleur des pixels d'une image sur une zone définie. Plus la valeur du rayon de flou (exprimée en pixels) est élevée, plus l'effet de flou sera prononcé.

Exemple :

filter: blur(5px);

invert : Inverser les couleurs

Le filtre invert inverse les couleurs de l'image. Cela peut être utilisé pour créer un effet de négatif.

Comment ça marche ?

Le filtre invert fonctionne en calculant le complément de chaque couleur d'un pixel. Par exemple, un pixel rouge deviendra cyan, un pixel vert deviendra magenta et un pixel bleu deviendra jaune. 100%: Indique que l'inversion est complète. Vous pouvez ajuster cette valeur entre 0% et 100% pour obtenir différents niveaux d'inversion.

Exemple :

filter: invert(100%);

saturate : Ajuster la saturation

Le filtre saturate ajuste la saturation des couleurs de l'image. Une valeur supérieure à 100% les rend plus vives, tandis qu'une valeur inférieure les rend plus ternes.

Comment ça marche ?

Le filtre saturate agit sur la pureté et l'intensité des couleurs. En modifiant la saturation, vous pouvez faire varier l'image d'un rendu très coloré à des tons presque monochromes.

Exemple :

filter: saturate(150%);

sepia : Effet sépia

Le filtre sepia applique un effet de vieillissement à l'image en lui donnant une teinte marron caractéristique.

Comment ça marche ?

Le filtre sepia convertit les couleurs d'origine en différentes nuances de bruns, rappelant les photographies anciennes du XIXe siècle. L'intensité de l'effet peut être ajustée avec une valeur en pourcentage.

Exemple :

filter: sepia(100%);

contrast : Contraste

Le filtre contrast ajuste le contraste de l'image. Une valeur de 100% laisse le contraste inchangé, tandis qu'une valeur supérieure augmente le contraste.

Comment ça marche ?

Le filtre contrast fonctionne en multipliant la différence de luminosité entre chaque pixel et le gris moyen par un facteur donné. Ce facteur, appelé valeur de contraste, détermine l'intensité de l'effet.

Exemple :

filter: contrast(200%);

brightness : Luminosité

Le filtre brightness ajuste la luminosité de l'image. Une valeur de 100% représente la luminosité d'origine, tandis qu'une valeur supérieure augmente la luminosité.

Comment ça marche ?

Le filtre brightness fonctionne en multipliant la luminosité de chaque pixel par une valeur donnée. Cette valeur, appelée facteur de luminosité, détermine l'intensité de l'effet.

Exemple :

filter: brightness(150%);

opacity : Opacité

Le filtre opacity permet de modifier la transparence d'un élément. Une valeur de 0% le rend invisible, tandis qu'une valeur de 100% conserve son apparence normale.

Comment ça marche ?

Le filtre opacity fonctionne en multipliant la couleur de chaque pixel par une valeur comprise entre 0 et 1. Cette valeur peut être exprimée en décimal (0 à 1) ou en pourcentage (0% à 100%). Plus le nombre est petit, plus le pixel devient transparent, jusqu'à disparaître complètement.

Exemple :

filter: opacity(50%);

drop-shadow : Ombre portée

Le filtre drop-shadow crée une ombre portée qui suit la forme de l'élément.

Comment ça marche ?

Le filtre drop-shadow ajoute une ombre floue derrière l'élément, en spécifiant sa position (horizontale et verticale), sa taille (flou) et sa couleur.

Exemple :

filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

hue-rotate : Rotation de teinte

Le filtre hue-rotate est idéal pour expérimenter des modifications sur les images, il permet de faire tourner la roue des couleurs pour obtenir des effets visuels intéressants.

Comment ça marche ?

Le filtre hue-rotate modifie la teinte de chaque couleur d'un élément en la faisant tourner autour de la roue des couleurs. La valeur spécifiée indique l'angle de rotation.

Exemple :

filter: hue-rotate(90deg);