In this French‑language YouTube short, the presenter demonstrates how to use CSS filter effects on HTML images. He shows two identical images side‑by‑side—one original and one “modified.” The tutorial walks through selecting the modified image with a CSS selector, applying the `filter` property, and stacking multiple filter functions. The focus is on the `grayscale` filter: its purpose (convert to black‑and‑white), acceptable value formats (percentage 0‑100 % or scalar 0‑1), and visual results at the extremes (0 %/0 = no change, 100 %/1 = full grayscale). The speaker explains that intermediate decimal values produce partial desaturation, and demonstrates the effect by refreshing the page.
Chapters
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, inverser les couleurs, et on peut même agir sur des propriétés comme l'opacité 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é, et ensuite on va appliquer des filtres. Pour appliquer un filtre 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 le filtre 1, Filtre 2, 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, elle est entièrement en noir et blanc.
