Les filtres CSS

Les filtres CSS permettent d'appliquer des transformations spectaculaires aux images et autres objets HTML. Il permettent par exemple d'afficher une image colorée en niveau de gris, rendre flou un objet ou inverser les couleurs de celui-ci... Leur effet est très pratique lors de l'affichage des albums photo dans un site Web par exemple.

Appliquer un filtre à un objet

Pour appliquer des filtres à un objet on fait appel à la propriété filter et on procède de la même manière que pour la propriété transform, c'est à dire qu'on déclare tous les filtres souhaités en les séparant par un espace comme ceci:
Les parenthèses servent de placer des valeurs qui permettent de personnaliser (ou calibrer) le filtre souhaité selon nos besoins.

L'effet grayscale

Le filtre grayscale() permet d'afficher une image (ou autre objet HTML) en niveau de gris (ou en noir et blanc).

Dans les parenthèses on spécifie une valeur en pourcentage qui permet de spécifier la profondeur du filtre du niveau de gris. La valeur 0% n'applique aucun effet visible et la valeur 100% permet d'avoir un objet complètement en niveau de gris.

Exemple:
Ce qui donne:
A gauche, il s'agit de l'image originale et à droite, c'est l'image avec le filtre décrit dans le code précédent.

L'effet saturate

Le filtre saturate() permet de régler la saturation d'un objet HTML.

Dans les parenthèses on spécifie une valeur en pourcentage qui permet de spécifier le degrés de saturation. La valeur 100% correspond à la valeur par défaut (sans filtre). Une valeur supérieur permet d'augmenter la saturation et une valeur inférieure permet de diminuer celle-ci. La valeur 0 permet de rendre une un objet noire et blanc.

Exemple:
Ce qui donne:

L'effet blur

Le filtre blur() permet de rendre flou un objet HTML.

Dans les parenthèses on spécifie une valeur en pixels. Plus cette valeur est grande plus l'objet sera flouté. Des valeur trop grandes font littéralement disperser les pixels de l'objet à tel point que celui-ci devient méconnaissable, voir invisible.

Exemple:
Ce qui donne:

L'effet brightness

Le filtre brightness() permet de régler la luminosité d'un objet.

Dans les parenthèses on spécifie une valeur en pourcentage. La valeur 100% est la valeur par défaut, et elle n'applique aucun effet visible sur l'objet. Plus cette valeur et grande plus l'objet devient lumineux et plus elle est petite plus l'objet devient sombre.

Exemple:
Ce qui donne:

L'effet contrast

Le filtre contrast() permet de régler le contraste de l'objet. Le contraste permet de régler la différence entre les nuances sombres et les nuances claires (littéralement le noir et le blanc).

Dans les parenthèses on spécifie une valeur en pourcentage. La valeur 100% est la valeur par défaut qui applique le contraste d'origine de l'objet. Une valeur supérieure à 100% augmente le contraste, donc rend les nuances claires encore plus claires et les nuances sombres plus sombres.

Exemple:
Ce qui donne:

L'effet sepia

Le filtre sepia() permet d'appliquer l'effet sepia à une image. Il s'agit d'un effet qui donne l'impression d'une vieille photographie.

Dans les parenthèses on spécifie une valeur en pourcentage (ou décimale) . La valeur 0 est la valeur par défaut qui applique aucun effe. La valeur 100% désigne un effet sepia absolu.

Exemple:
Ce qui donne:

L'effet invert

Le filtre invert() permet d'afficher le négatif d'une image.

Entre les parenthèses on spécifie une valeur en pourcentage (ou décimale). La valeur 100% affiche une image en couleurs totalement négatives.

Exemple:
Ce qui donne:

L'effet hue-rotate

Le filtre hue-rotate() permet de changer les teints d'une image en les décalant toutes d'un angle spécifié entre les parenthèses. La valeur 0 n'applique aucun effet visible sur l'image. Des valeurs différentes permettent de changer tous les teints de l'image.

Exemple:
Ce qui donne:

L'effet opacity

Le filtre opacity() permet de changer l'opacité d'une image ou un objet. Il applique exactement le même effet que la propriété opacity.

On spécifie la valeur de l'opacité entre les parenthèses soit par un nombre décimal (compris entre 0 et 1) soit en pourcentage.

Exemple:
Ce qui donne:

L'effet drop-shadow

Le filtre drop-shadow() permet d'appliquer une ombre portée à une image ou à un objet HTML. Cet effet se comporte exactement comme la propriété box-shadow et accepte les mêmes paramètres que celui-ci, à savoir: l'étalement horizontal de l'ombre, l'étalement vertical, la dispersion et la couleur.

Exemple:
Ce qui donne:

Les filtres CSS en vidéo