CSS-Filter

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

Filter ermöglichen es Ihnen, Bilder, Hintergründe und sogar Text visuell zu verändern, indem Sie lustige Effekte verwenden. Es ist, als würde man eine Sonnenbrille aufsetzen, ein Spotlight einschalten oder in den Schwarz-Weiß-Modus wechseln – und das alles mit nur einer Zeile CSS.

1. Blur (px) – Lässt das Element weich und unscharf erscheinen.

img {
  filter: blur(5px);
}
//leicht unscharf

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

img {
  filter: brightness(150%);
}
//hellt auf, als würde man ein Spotlight einschalten.

3. Graustufen(%) – Konvertiert Farben in Schwarz-Weiß.

img {
  filter: grayscale(100%);
}
//klassischer Vintage- oder Zeitungseffekt.

4. Sepia(%) – Fügt einen warmen, bräunlichen Ton für eine Retro-Foto-Atmosphäre hinzu.

img {
  filter: sepia(70%);
}
//wie ein altes Fotoalbum.

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Sie haben vier Bilder in einer Galerie. Ihre Herausforderung besteht darin, die folgenden Filter auf jedes Bild anzuwenden:

Erstes Bild (Blur): Wenden Sie einen blur(3px) Filter an, um das Bild weich und unscharf zu machen.
Zweites Bild (Brightness): Verwenden Sie brightness(2.0), um das Bild heller zu machen.
Drittes Bild (Grayscale): Wenden Sie grayscale(100%) an, um das Bild in Schwarz-Weiß umzuwandeln.
Viertes Bild (Sepia): Verwenden Sie sepia(70%), um dem Bild einen warmen Vintage-Ton zu verleihen.

Spickzettel

CSS-Filter ermöglichen es Ihnen, Bilder, Hintergründe und Text mithilfe von Effekten visuell zu verändern.

Blur (px) – Macht Elemente weich und unscharf:

img {
  filter: blur(5px);
}

Brightness(%) – Steuert, wie hell oder dunkel etwas erscheint:

img {
  filter: brightness(150%);
}

Grayscale(%) – Wandelt Farben in Schwarz-Weiß um:

img {
  filter: grayscale(100%);
}

Sepia(%) – Fügt einen warmen, bräunlichen Ton für einen Retro-Fotoeffekt hinzu:

img {
  filter: sepia(70%);
}

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.