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 Rahmen eines Elements hinzuzufügen. Diese Eigenschaft ermöglicht es Ihnen, visuell ansprechende Effekte zu erstellen, die Elemente so aussehen lassen, als würden sie aus der Seite „hervorstechen“, oder Tiefe und Dimension erzeugen.

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

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, negative Werte verschieben ihn 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 Weichzeichnungsradius des Schattens. Ein größerer Wert erzeugt einen stärker verschwommenen Schatten. Falls weggelassen, ist der Standardwert 0 (keine Unschärfe).

spread (optional): Der Ausbreitungsradius des Schattens. Positive Werte führen dazu, dass der Schatten expandiert, und negative Werte führen dazu, dass er schrumpft.

color (optional): Die Farbe des Schattens. Sie kann mit benannten Farben, Hexadezimalwerten, RGB-Werten oder HSL-Werten 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 von 5px, einem vertikalen Versatz von 5px, einem Weichzeichner-Radius 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 Weichzeichner-Radius von 5px, einem Ausbreitungsradius von 2px und einer halbtransparenten schwarzen Farbe (rgba(0, 0, 0, 0.5)).

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit einem Bereich (<div>) und einem Absatz (<p>) gegeben. Ihre Aufgabe ist es, die Eigenschaft box-shadow 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).

Spickzettel

Die Eigenschaft box-shadow fügt Elementen Schatteneffekte hinzu:

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

horizontal-offset: Horizontaler Abstand (positiv = rechts, negativ = links)
vertical-offset: Vertikaler Abstand (positiv = unten, negativ = oben)
blur (optional): Weichzeichnungsradius (größer = unschärfer)
spread (optional): Ausbreitungsradius (positiv = ausdehnen, negativ = verkleinern)
color (optional): Schattenfarbe
inset (optional): Erzeugt einen inneren Schatten anstelle eines äußeren

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

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

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>