Filtres CSS

Fait partie de la section CSS Mastery du Journey HTML de Coddy. Leçon 22 sur 43.

Les filtres vous permettent de modifier visuellement les images, les arrière-plans et même le texte à l'aide d'effets amusants. C'est comme mettre des lunettes de soleil, allumer un projecteur ou passer en mode noir et blanc — le tout avec une seule ligne de CSS.

1. Flou (px) – Rend l'élément flou et moins net.

img {
  filter: blur(5px);
}
//légèrement flou

2. Luminosité (%) – Contrôle à quel point un élément apparaît clair ou sombre.

img {
  filter: brightness(150%);
}
//éclaircit comme si on allumait un projecteur.

3. Grayscale(%) – Convertit la couleur en noir et blanc.

img {
  filter: grayscale(100%);
}
//effet vintage classique ou journal.

4. Sépia(%) – Ajoute une tonalité chaude et brunâtre pour une ambiance de photo rétro.

img {
  filter: sepia(70%);
}
//comme un vieil album photo.

Il existe de nombreux autres filtres avec lesquels vous pouvez expérimenter ! N'hésitez pas à les explorer et à voir quels effets créatifs vous pouvez créer.

Défi

Facile

Vous avez quatre images dans une galerie. Votre défi consiste à appliquer les filtres suivants à chaque image :

Première image (Flou) : Appliquez un filtre blur(3px) pour rendre l'image douce et floue.
Deuxième image (Luminosité) : Utilisez brightness(2.0) pour rendre l'image plus lumineuse.
Troisième image (Niveaux de gris) : Appliquez grayscale(100%) pour mettre l'image en noir et blanc.
Quatrième image (Sépia) : Utilisez sepia(70%) pour donner à l'image un ton chaud et vintage.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>