CSS-Filter

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 22 von 43.

Mit Filtern kannst du Bilder, Hintergründe und sogar Text visuell verändern, indem du unterhaltsame Effekte verwendest. Es ist wie das Aufsetzen einer Sonnenbrille, das Einschalten eines Scheinwerfers oder der Wechsel in den Schwarz-Weiß-Modus – und das alles mit einer einzigen Zeile CSS.

1. Unschärfe (px) : Lässt das Element weich und unscharf erscheinen.

img {
  filter: blur(5px);
}
//slightly out of focus

2. Helligkeit(%): Steuert, wie hell oder dunkel etwas erscheint.

img {
  filter: brightness(150%);
}
//brightens like turning on a spotlight.

3. Grayscale(%): Wandelt Farbe in Schwarzweiß um.

img {
  filter: grayscale(100%);
}
//classic vintage or newspaper effect.

4. Sepia(%): Fügt einen warmen, bräunlichen Farbton für eine nostalgische Fotoatmosphäre hinzu.

img {
  filter: sepia(70%);
}
//like an old photo album.

Es gibt noch viele weitere Filter, mit denen du experimentieren kannst! Probiere sie gerne aus und sieh, welche kreativen Effekte du erzeugen kannst.

Aufgabe

Einfach

Du hast vier Bilder in einer Galerie. Deine Herausforderung besteht darin, die folgenden Filter auf jedes Bild anzuwenden:

Erstes Bild (Unschärfe): Wende einen blur(3px)-Filter an, um das Bild weich und unscharf erscheinen zu lassen.
Zweites Bild (Helligkeit): Verwende brightness(2.0), um das Bild heller zu machen.
Drittes Bild (Graustufen): Wende grayscale(100%) an, um das Bild in Schwarzweiß umzuwandeln.
Viertes Bild (Sepia): Verwende sepia(70%), um dem Bild einen warmen, nostalgischen Farbton zu verleihen.

Jedes Bild befindet sich in einem Wrapper <div> mit einer nach seinem Filter benannten Klasse (blur, brightness, grayscale, sepia). Greife mit einem Nachfahrenselektor auf das Bild zu, zum Beispiel .blur img { filter: blur(3px); }, und schreibe eine Regel pro Bild.

Probier es selbst

<!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>