Box-Shadow

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

In CSS wird die box-shadow-Eigenschaft verwendet, um Schatteneffekte zum Elementfeld hinzuzufügen. Diese Eigenschaft ermöglicht es Ihnen, visuell ansprechende Effekte zu erzeugen, die Elemente so wirken lassen, als würden sie aus der Seite „hervortreten“, oder die Tiefe und Dimension erzeugen.

Hier ist die grundlegende Syntax für die Verwendung der Eigenschaft box-shadow:

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

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

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

blur (optional): Der Unschärferadius des shadow. Ein größerer Wert erzeugt einen stärker verschwommenen shadow. Wenn weggelassen, ist der Standardwert 0 (kein blur).

spread (optional): Der Ausdehnungsradius (Spread-Radius) des Schattens. Positive Werte führen dazu, dass sich der Schatten ausdehnt, und negative Werte führen dazu, dass er schrumpft.

color (optional): Die Farbe des Schattens. Sie kann über Farbnamen, Hexadezimalwerte, RGB-Werte oder HSL-Werte angegeben werden.
inset (optional): Ändert den Schatten von einem äußeren Schatten (outset) zu einem 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 (offset) von 5px, einem vertikalen Versatz (offset) von 5px, einem Weichzeichnen-Radius (blur) von 10px und einer grauen Farbe (gray). Elemente mit der Klasse button haben einen Box-Schatten mit einem horizontalen Versatz von 2px, einem vertikalen Versatz von 2px, einem Weichzeichnen-Radius von 5px, einem Ausdehnungs-Radius (spread) von 2px und einer halbtransparenten schwarzen Farbe (rgba(0, 0, 0, 0.5)).

Aufgabe

Einfach

Ihnen liegt ein HTML-Dokument mit einer Division (<div>) und einem Paragraph (<p>) vor. Ihre Aufgabe ist es, die box-shadow-Eigenschaft zu verwenden, um diesen Elementen Schatteneffekte hinzuzufügen. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <div>-Element abzielt. Setzen Sie box-shadow auf 10px 10px 5px gray.
Schreiben Sie eine CSS-Regel, die auf das <p>-Element abzielt. Setzen Sie 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>