Dans cette leçon vidéo, l’auteur explique en détail le fonctionnement des filtres CSS appliqués aux images HTML. Après avoir présenté le contexte d’une page contenant deux images – l’une originale, l’autre modifiée – il montre comment sélectionner l’image cible et appliquer la propriété `filter` avec une liste de fonctions de filtre. Chaque fonction (grayscale, saturate, blur, brightness, contrast, sepia, invert, hue‑rotate, drop‑shadow) est décrite : type de valeur accepté (pourcentage, nombre scalaire, pixels, degrés), valeur maximale/minimale, et effet visuel observé sur l’image. Des exemples concrets de valeurs (ex. grayscale 100 %, saturate 150 %, blur 5px, brightness 150 %, contrast 150 %, sepia 100 %, invert 100 %, hue‑rotate 45°) illustrent comment les images changent de couleur, de netteté, de luminosité ou d’ombre portée. La vidéo se conclut par un rappel de l’utilité des filtres et une invitation à la prochaine leçon.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui, nous allons traiter les filtres. Les filtres CSS permettent d'appliquer des effets remarquables aux objets HTML et principalement aux images. Avec les filtres, on peut par exemple régler le contraste, la saturation des couleurs, l'éclairage, ou bien même inverser les couleurs, et on peut même agir sur des propriétés comme l'opacité et et l'ombre portée. Considérons le code HTML suivant. Dans la balise body, nous avons intégré 2 images avec la même source, une identifiée par original et l'autre est identifiée par modifiée. Nous avons maintenant les 2 images qui seront affichées de la manière suivante. L'image à gauche, c'est l'image originale, et l'image à droite, c'est l'image à laquelle on va faire subir les filtres CSS afin de voir à quoi ça va ressembler. Première chose à faire, c'est identifier l'élément grâce au sélecteur modifié. Ensuite on va appliquer des filtres. Pour appliquer un filtre au CSS, il suffit de mettre la propriété filter et ensuite on va mettre la liste des filtres que l'on souhaite appliquer. Par exemple, filtre1, filtre2, etc. Finalement, on va combiner les filtres exactement comme on a fait pour la transformation. On va commencer par le premier filtre, c'est grayscale. Grayscale permet d'appliquer du noir et du blanc sur notre image à une certaine intensité. La valeur maximale de grayscale, c'est 100%. Ça peut être une valeur en pourcentage ou bien une valeur scalaire comprise entre 0 et 1. Avec 100%, quand j'actualise, je vais voir que l'image à droite est devenue noir et blanc. Avec la valeur 0, il ne s'applique aucune transformation, ça veut dire que l'image reste la même. Au lieu de mettre 100%, je peux mettre la valeur scalaire 1. 1, c'est le maximum. Et bien sûr, je peux mettre des nombres avec des chiffres après la virgule qui sont compris entre 0 et 1. Quand j'actualise maintenant, je vais avoir le même effet que tout à l'heure, c'est-à-dire l'image est entièrement en noir et blanc. Maintenant on va voir un autre effet, c'est la saturation. On va éliminer grayscale et on va mettre saturate. La valeur 1 ou bien 100% n'applique aucune modification, donc l'image reste la même. Si on veut saturer l'image, il suffit de prendre une valeur qui est supérieure à 1 ou bien supérieure à 100%. Par exemple, on va mettre 100. 50%. Quand j'actualise, je vais voir que les couleurs sont devenues plus vives. En fait, la saturation permet tout simplement d'exprimer l'intensité de présence des couleurs au sein d'une image. Alors là, nous avons une présence vive des couleurs. Maintenant, on va voir l'effet Blur, c'est-à-dire du flou. On peut appliquer du flou avec une valeur en pixels. Plus la valeur est grande, plus le flou est accentué. On va mettre par exemple la valeur de px. Quand j'actualise, on va voir que l'image à droite est devenue un peu plus floue. Avec une valeur encore plus grande, par exemple 5px, on va voir que le flou deviendra plus perceptible. Ensuite, il y a l'effet brightness. Avec brightness, je peux appliquer la valeur 100%, qui n'applique rien du tout, c'est-à-dire que l'image est semblable à l'originale. Si je veux ajouter de l'éclairage, il suffit de prendre une valeur supérieure à 100%, par exemple 150%. Même chose, je peux mettre une variable scalaire, ça veut dire la valeur 0, bien 1, bien 1,5, comme je veux. J'actualise maintenant et on regarde bien que l'image est devenue plus éclairée. Pour rendre l'image plus sombre, il suffit de prendre une valeur inférieure à 100%, par exemple 50% ou bien 0,5, et ça donne une image plus sombre. Il y a aussi l'effet Contraste. Contraste, il peut accepter aussi une valeur scalaire ou bien une valeur en pourcentage. Par exemple, 100% n'applique aucun effet, ça veut dire le contraste est le même. Le contraste permet tout simplement d'exprimer la différence entre le noir et le blanc. Plus le contraste est élevé, plus la différence entre le noir et le blanc dans une image est grande. Alors là, pour augmenter le contraste, on va mettre par exemple 150%. Et on va voir que la différence entre les couleurs est devenue plus perceptible, et principalement entre la nuance noire et la nuance blanche. On va voir maintenant l'effet Sépia. Bon, l'effet Sépia, ça permet tout simplement de restaurer ou bien de retrouver l'effet des anciennes photographies. Par exemple, avec la valeur 100%, on va voir que l'image est devenue comme ça. C'est comme du noir et du blanc, mais il y a une petite présence de la couleur marron. On peut aussi inverser les couleurs grâce à invert. Donc avec invert, on va prendre par exemple la valeur 100% qui donnera une inversion maximale des couleurs. C'est le négatif de l'image qu'on a obtenue dans ce cas. On peut aussi changer carrément les couleurs présentes dans l'image grâce à la rotation de l'espace des couleurs grâce à ceci, donc hue Rotate, on exprime une valeur en degrés, par exemple 45 degrés. Il permet tout simplement de changer carrément de teinte des couleurs. Alors là, les couleurs sont différentes des couleurs originales. Bon, maintenant on va mettre une autre valeur plus grande, par exemple 90%, bien 180% carrément pour inverser totalement les couleurs. Et on a ici donc les couleurs qui sont de cette manière. Bien sûr, si on fait le tour, ça veut dire 360 degrés, on va tout simplement retrouver les couleurs d'origine. Il y a aussi la valeur drop-shadow. Drop-shadow, ça donne tout simplement ce qu'on appelle l'ombre portée. On a vu qu'on peut faire ça grâce à box-shadow en tant que propriété CSS, mais on peut aussi le faire grâce aux filtres. Et les valeurs sont les mêmes que pour box-shadow. Ça veut dire on va mettre l'étendue de l'ombre horizontale et verticale et ensuite la transition de l'ombre et finalement la couleur. Par exemple, on va mettre directement black ou bien une couleur RGBA pour que ce soit plus naturel. Et on voit qu'il y a une ombre qui est appliquée autour de l'image dans le sens qui est indiqué parce que c'est un sens positif, donc c'est vers la droite et vers le bas. Merci pour votre attention et à la vidéo prochaine.
