Kostenlose Tutorials für Anfänger

Appearance

Kapitel 22: Schatten & Filter** ​

🌑 Lernziel: Meistern Sie CSS-Schatten und Filter, um Elemente dreidimensionaler und hochwertiger wirken zu lassen.

22.1 Box-Schatten (box-shadow) ​

💡 Was ist box-shadow? ​

box-shadow fügt einem Element einen Schatten hinzu, um Tiefe und Dreidimensionalität zu erzeugen.

🎯 Grundlegende Syntax ​

css
box-shadow: [Inset] [X-Versatz] [Y-Versatz] [Unschärfe] [Ausbreitung] [Farbe];

📝 Beispiel 1: Einfacher Schatten ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einfacher Schatten</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: white;
            /* Schatten: X=10px, Y=10px, Unschärfe=5px, Farbe=grau */
            box-shadow: 10px 10px 5px gray;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Erklärung:

  • 10px - Horizontaler Versatz (nach rechts)
  • 10px - Vertikaler Versatz (nach unten)
  • 5px - Unschärfe (wie "weich" der Schatten ist)
  • gray - Schattenfarbe

📝 Beispiel 2: Innerer Schatten (inset) ​

css
.box-innen {
    width: 200px;
    height: 200px;
    background-color: white;
    /* Innerer Schatten */
    box-shadow: inset 0 0 10px gray;
}

📝 Beispiel 3: Mehrere Schatten (Überlagerung) ​

css
.box-mehrere {
    width: 200px;
    height: 200px;
    background-color: white;
    /* Zwei Schatten übereinander */
    box-shadow: 
        0 4px 6px rgba(0,0,0,0.1),
        0 1px 3px rgba(0,0,0,0.08);
}

22.2 Text-Schatten (text-shadow) ​

💡 Was ist text-shadow? ​

text-shadow fügt Text einen Schatten hinzu, um die Lesbarkeit zu verbessern oder einen Spezialeffekt zu erzielen.

🎯 Grundlegende Syntax ​

css
text-shadow: [X-Versatz] [Y-Versatz] [Unschärfe] [Farbe];

📝 Beispiel 4: Einfacher Textschatten ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Textschatten</title>
    <style>
        .text-mit-schatten {
            font-size: 48px;
            color: white;
            /* Textschatten: X=2px, Y=2px, Unschärfe=4px, Farbe=schwarz */
            text-shadow: 2px 2px 4px black;
        }
    </style>
</head>
<body style="background-color: gray;">
    <div class="text-mit-schatten">Text mit Schatten</div>
</body>
</html>

📝 Beispiel 5: Leuchtender Text ​

css
.text-leuchtend {
    font-size: 48px;
    color: white;
    /* Leuchtender Effekt */
    text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
}

22.3 CSS-Filter (filter) ​

💡 Was sind CSS-Filter? ​

CSS-Filter wenden Effekte auf Elemente an (ähnlich wie in Photoshop).

🎯 Häufige Filtereffekte ​

FilterBeschreibungBeispiel
blur()Weichzeichnen (Unschärfe)filter: blur(5px);
brightness()Helligkeitfilter: brightness(1.5);
contrast()Kontrastfilter: contrast(200%);
grayscale()Graustufenfilter: grayscale(100%);
hue-rotate()Farbton drehenfilter: hue-rotate(90deg);
invert()Farben invertierenfilter: invert(100%);
opacity()Transparenzfilter: opacity(50%);
saturate()Farbsättigungfilter: saturate(200%);
sepia()Sepia-Effektfilter: sepia(100%);

📝 Beispiel 6: Weichzeichnen (blur) ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Weichzeichnen</title>
    <style>
        .bild-unscharf {
            /* Bild wird weichgezeichnet */
            filter: blur(5px);
        }
        
        .bild-unscharf:hover {
            /* Beim Darüberfahren: Keine Unschärfe */
            filter: blur(0);
        }
    </style>
</head>
<body>
    <img src="bild.jpg" class="bild-unscharf" alt="Bild">
</body>
</html>

📝 Beispiel 7: Helligkeit (brightness) ​

css
.bild-hell {
    /* Bild wird 50% heller */
    filter: brightness(1.5);
}

📝 Beispiel 8: Graustufen (grayscale) ​

css
.bild-grau {
    /* Bild wird komplett grau */
    filter: grayscale(100%);
}

.bild-grau:hover {
    /* Beim Darüberfahren: Farbig */
    filter: grayscale(0);
}

📝 Beispiel 9: Mehrere Filter kombinieren ​

css
.bild-kombiniert {
    /* Mehrere Filter gleichzeitig */
    filter: brightness(1.2) contrast(1.1) saturate(1.3);
}

22.4 Praxis: Karten mit 3D-Schatten, unscharfer Hintergrund, graue Bilder mit Hover-Farbeffekt ​

🎨 Praxis 1: Karte mit 3D-Schatten ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>3D-Karte</title>
    <style>
        .karte {
            width: 300px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            /* 3D-Schatten-Effekt */
            box-shadow: 
                0 1px 3px rgba(0,0,0,0.12),
                0 4px 6px rgba(0,0,0,0.08);
            transition: box-shadow 0.3s ease;
        }
        
        .karte:hover {
            /* Tieferer Schatten beim Darüberfahren */
            box-shadow: 
                0 10px 20px rgba(0,0,0,0.15),
                0 3px 6px rgba(0,0,0,0.10);
        }
    </style>
</head>
<body>
    <div class="karte">
        <h3>Kartentitel</h3>
        <p>Karteninhalt...</p>
    </div>
</body>
</html>

🎨 Praxis 2: Unscharfer Hintergrund ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Unscharfer Hintergrund</title>
    <style>
        .hintergrund {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('hintergrund.jpg');
            background-size: cover;
            /* Hintergrundbild weichzeichnen */
            filter: blur(10px);
            z-index: -1;
        }
        
        .inhalt {
            position: relative;
            z-index: 1;
            color: white;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="hintergrund"></div>
    <div class="inhalt">
        <h1>Inhalt über unscharfem Hintergrund</h1>
    </div>
</body>
</html>

🎨 Praxis 3: Graues Bild mit Farbeffekt beim Darüberfahren ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Graues Bild mit Hover-Effekt</title>
    <style>
        .bild-grau-hover {
            /* Bild ist standardmäßig grau */
            filter: grayscale(100%);
            transition: filter 0.5s ease;
        }
        
        .bild-grau-hover:hover {
            /* Beim Darüberfahren: Farbig */
            filter: grayscale(0);
        }
    </style>
</head>
<body>
    <img src="bild.jpg" class="bild-grau-hover" alt="Bild">
</body>
</html>

✅ Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  1. ✅ Box-Schatten - box-shadow für 3D-Effekte
  2. ✅ Text-Schatten - text-shadow für Text-Effekte
  3. ✅ CSS-Filter - filter für Bildbearbeitungseffekte
  4. ✅ Praxis - 3D-Karten, unscharfe Hintergründe, Hover-Effekte

🎯 Übung ​

Übung 1: Erstellen Sie eine Karte mit 3D-Schatten.

Übung2: Erstellen Sie einen Text mit leuchtendem Schatten.

Übung3: Erstellen Sie ein Bild, das standardmäßig grau ist und beim Darüberfahren farbig wird.

📚 Nächstes Kapitel ​

Im nächsten Kapitel lernen wir Icon-Fonts (Schriftart-Icons), um Bilder durch Vektorgrafiken zu ersetzen.

[Weiter zu Kapitel 23: Icon-Fonts →]

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials