Les filtres CSS

1. Comment utiliser les filtres en CSS ?

Les filtres sont appliqués aux éléments HTML à l'aide de la propriété CSS filter. Tu peux appliquer un ou plusieurs effets de filtre en les combinant dans une seule expression. Par exemple :

1img {
2  filter: blur(5px) brightness(0.8);
3}

Dans ce cas, l'image sera floutée de 5 pixels et la luminosité sera réduite à 80 % de sa valeur d'origine.

2. Types de filtres

Il existe de nombreux filtres disponibles, chacun offrant un effet unique. En voici quelques-uns populaires :

• blur() : floute l'élément, par exemple filter: blur(4px);.
• brightness() : change la luminosité : brightness(0.5) assombrit de moitié, brightness(1.5) éclaircit.
• contrast() : change le contraste, par exemple contrast(1.5).
• grayscale() : transforme les couleurs en niveaux de gris, par exemple grayscale(100%).
• hue-rotate() : fait tourner les teintes sur la roue chromatique, par exemple hue-rotate(90deg).
• invert() : inverse les couleurs, par exemple invert(100%).
• opacity() : règle la transparence, par exemple opacity(50%).
• saturate() : change la saturation, par exemple saturate(2).
• sepia() : donne l'aspect d'une vieille photographie, par exemple sepia(100%).

3. Combiner les filtres

Tu peux combiner différents filtres pour obtenir des effets complexes. Les filtres sont appliqués dans l'ordre où ils sont écrits. Par exemple :

1img {
2  filter: grayscale(100%) contrast(1.5) brightness(0.7);
3}

Dans l'exemple ci-dessus, l'image sera d'abord convertie en niveaux de gris, puis un contraste plus élevé sera appliqué, et enfin la luminosité sera réduite.

4. Prise en charge par les navigateurs

Les filtres fonctionnent dans tous les navigateurs actuels ; ne vérifie la compatibilité que si tu dois prendre en charge de très vieilles versions.

Exercice : Les filtres CSS

Dans cet exercice, tu vas apprendre à utiliser les filtres CSS pour appliquer divers effets visuels aux éléments HTML. Ta tâche sera de créer une page web avec une image qui sera mise en forme à l'aide de différents filtres CSS.

Étape 1 : Créer la structure de document HTML de base

D'abord, crée un nouveau fichier HTML et ajoute la structure de document HTML de base. Ajoute un élément <img> avec une image d'exemple dans le corps du document (<body>).

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Filtres CSS</title>
8</head>
9<body>
10  <h1>Filtres CSS</h1>
11  <img src="https://placehold.co/150" class="example-image blur" alt="Exemple d'image">
12</body>
13</html>

Étape 2 : Créer le fichier CSS

Ouvre ou crée un nouveau fichier CSS et enregistre-le sous le nom styles.css.

Étape 3 : Ajouter le filtre blur

Ajoute un style pour la classe .example-image afin d'appliquer un effet de flou à l'image.

1/* Filtre blur */
2.example-image.blur {
3  filter: blur(5px);
4}

Le sélecteur .example-image.blur (deux classes sans espace) n'atteint qu'une image qui a les deux classes à la fois.

Étape 4 : Ajouter le filtre brightness

Ajoute un style pour la classe .example-image afin de changer la luminosité de l'image.

1/* Filtre brightness */
2.example-image.brightness {
3  filter: brightness(0.8);
4}

Étape 5 : Ajouter le filtre contrast

Ajoute un style pour la classe .example-image afin de changer le contraste de l'image.

1/* Filtre contrast */
2.example-image.contrast {
3  filter: contrast(1.5);
4}

Étape 6 : Ajouter le filtre grayscale

Ajoute un style pour la classe .example-image afin de convertir l'image en niveaux de gris.

1/* Filtre grayscale */
2.example-image.grayscale {
3  filter: grayscale(100%);
4}

Étape 7 : Ajouter le filtre hue-rotate

Ajoute un style pour la classe .example-image afin de faire tourner les teintes de l'image.

1/* Filtre hue-rotate */
2.example-image.hue-rotate {
3  filter: hue-rotate(90deg);
4}

Étape 8 : Ajouter le filtre invert

Ajoute un style pour la classe .example-image afin d'inverser les couleurs de l'image.

1/* Filtre invert */
2.example-image.invert {
3  filter: invert(100%);
4}

Étape 9 : Ajouter le filtre opacity

Ajoute un style pour la classe .example-image afin de changer la transparence de l'image.

1/* Filtre opacity */
2.example-image.opacity {
3  filter: opacity(50%);
4}

Étape 10 : Ajouter le filtre saturate

Ajoute un style pour la classe .example-image afin d'augmenter la saturation des couleurs de l'image.

1/* Filtre saturate */
2.example-image.saturate {
3  filter: saturate(2);
4}

Étape 11 : Ajouter le filtre sepia

Ajoute un style pour la classe .example-image afin d'ajouter un effet sépia à l'image.

1/* Filtre sepia */
2.example-image.sepia {
3  filter: sepia(100%);
4}

Étape 12 : Combiner les filtres

Ajoute un style pour la classe .example-image afin d'appliquer plusieurs filtres à la fois.

1/* Filtres combinés */
2.example-image.combined {
3  filter: grayscale(100%) contrast(1.5) brightness(0.7);
4}

Résultat

Une fois toutes les étapes terminées, tes fichiers HTML et CSS devraient ressembler à ceci :

Fichier HTML (index.html)

La page avec une image distincte pour chaque filtre :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Filtres CSS</title>
8</head>
9<body>
10  <h1>Filtres CSS</h1>
11  <img src="https://placehold.co/150" class="example-image blur" alt="Filtre blur">
12  <img src="https://placehold.co/150" class="example-image brightness" alt="Filtre brightness">
13  <img src="https://placehold.co/150" class="example-image contrast" alt="Filtre contrast">
14  <img src="https://placehold.co/150" class="example-image grayscale" alt="Filtre grayscale">
15  <img src="https://placehold.co/150" class="example-image hue-rotate" alt="Filtre hue-rotate">
16  <img src="https://placehold.co/150" class="example-image invert" alt="Filtre invert">
17  <img src="https://placehold.co/150" class="example-image opacity" alt="Filtre opacity">
18  <img src="https://placehold.co/150" class="example-image saturate" alt="Filtre saturate">
19  <img src="https://placehold.co/150" class="example-image sepia" alt="Filtre sepia">
20  <img src="https://placehold.co/150" class="example-image combined" alt="Filtres combinés">
21</body>
22</html>

Fichier CSS (styles.css)

Toutes les règles des étapes 3 à 12 dans un seul fichier :

1/* Filtre blur */
2.example-image.blur {
3  filter: blur(5px);
4}
5
6/* Filtre brightness */
7.example-image.brightness {
8  filter: brightness(0.8);
9}
10
11/* Filtre contrast */
12.example-image.contrast {
13  filter: contrast(1.5);
14}
15
16/* Filtre grayscale */
17.example-image.grayscale {
18  filter: grayscale(100%);
19}
20
21/* Filtre hue-rotate */
22.example-image.hue-rotate {
23  filter: hue-rotate(90deg);
24}
25
26/* Filtre invert */
27.example-image.invert {
28  filter: invert(100%);
29}
30
31/* Filtre opacity */
32.example-image.opacity {
33  filter: opacity(50%);
34}
35
36/* Filtre saturate */
37.example-image.saturate {
38  filter: saturate(2);
39}
40
41/* Filtre sepia */
42.example-image.sepia {
43  filter: sepia(100%);
44}
45
46/* Filtres combinés */
47.example-image.combined {
48  filter: grayscale(100%) contrast(1.5) brightness(0.7);
49}

Pour aller plus loin

1. Ajoute davantage d'éléments avec différents filtres pour mieux comprendre comment fonctionnent les différents filtres.
2. Essaie d'ajouter davantage de styles à ta page, par exemple en changeant les couleurs, les tailles et d'autres propriétés CSS.
3. Teste tes compétences en créant des effets plus complexes à l'aide de différentes combinaisons de filtres.

Après avoir terminé cet exercice, tu devrais mieux comprendre comment utiliser différents filtres CSS pour appliquer divers effets visuels aux éléments HTML.