Box-Schatten

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 42 von 76.

In CSS wird die Eigenschaft box-shadow verwendet, um dem Rahmen eines Elements Schatteneffekte hinzuzufügen. Mit dieser Eigenschaft kannst du visuell ansprechende Effekte erzeugen, durch die Elemente von der Seite „hervorzutreten“ scheinen oder Tiefe und Dimension erhalten.

Hier ist die grundlegende Syntax zur Verwendung der Eigenschaft box-shadow:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Der Abstand des Schattens horizontal vom Element. Positive Werte verschieben den Schatten nach rechts, negative Werte nach links.

vertical-offset: Der vertikale Abstand des Schattens vom Element. Positive Werte verschieben den Schatten nach unten, negative Werte verschieben ihn nach oben.

blur (optional): Der Unschärferadius des Schattens. Ein größerer Wert erzeugt einen stärker verschwommenen Schatten. Wenn er weggelassen wird, ist der Standardwert 0 (keine Unschärfe).

spread (optional): Der Ausbreitungsradius des Schattens. Positive Werte lassen den Schatten größer werden, negative Werte lassen ihn kleiner werden.

color (optional): Die Farbe des Schattens. Sie kann mithilfe benannter Farben, hexadezimaler Werte, RGB-Werte oder HSL-Werte angegeben werden.
inset (optional): Ändert den Schatten von einem äußeren Schatten (outset) in einen inneren Schatten.

Zum Beispiel:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

In diesem Beispiel haben alle <div>-Elemente einen Box-Schatten mit einem horizontalen Versatz von 5px, einem vertikalen Versatz von 5px, einem Unschärferadius von 10px und einer grauen Farbe. Elemente mit der Klasse button haben einen Box-Schatten mit einem horizontalen Versatz von 2px, einem vertikalen Versatz von 2px, einem Unschärferadius von 5px, einem Ausbreitungsradius von 2px und einer halbtransparenten schwarzen Farbe (rgba(0, 0, 0, 0.5)).

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einem Division-Element (<div>) und einem Absatz (<p>). Deine Aufgabe besteht darin, die Eigenschaft box-shadow zu verwenden, um diesen Elementen Schatteneffekte hinzuzufügen. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf das Element <div> abzielt. Setze box-shadow auf 10px 10px 5px gray.
Schreibe eine CSS-Regel, die auf das Element <p> abzielt. Setze box-shadow auf -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Probier es selbst

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>