Die Eigenschaft box-shadow in CSS dient Entwicklern als effektiver Mechanismus, um HTML-Elementen Tiefe und Dimension zu verleihen. Durch die Integration von Schatten in Elemente kann man den Realismus und die visuelle Attraktivität der Benutzeroberfläche verbessern. Dieser Artikel befasst sich mit den Grundlagen von Box-Shadow und bietet Beispiele, die Ihnen bei der Beherrschung seiner Anwendung helfen.

Die Grundlagen verstehen

Die Eigenschaft box-shadow besteht aus mehreren Werten, die definieren, wie der Schatten angezeigt wird. Hier ist die grundlegende Syntax:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: Dieser Parameter definiert die horizontale Verschiebung des Schattens. Positive Werte verschieben den Schatten nach rechts, negative Werte verschieben ihn nach links.
• offset-y: Dieser Parameter gibt die vertikale Verschiebung des Schattens an. Positive Werte verschieben den Schatten nach unten, negative Werte heben ihn an.
• blur-radius (optional): Diese Einstellung reguliert die Weichheit des Schattens. Ein höherer Wert führt zu einem diffuseren Schatten. Wenn dieser Parameter nicht angegeben ist, ist der Standardwert 0, was einen deutlichen Schatten erzeugt.
• Spread-Radius (optional): Dieser Parameter beeinflusst die Abmessungen des Schattens. Positive Werte erhöhen die Größe des Schattens, negative Werte verkleinern ihn.
• Farbe: Dieses Attribut definiert die Farbe des Schattens. Es kann sich um jede gültige CSS-Farbdarstellung handeln, beispielsweise #000, rgba(0,0,0,0.5) oder hsl(0, 0 %, 50 %).

Beispiel: Basic Box Shadow

Sehen wir uns ein einfaches Beispiel für einen Kastenschatten an, der auf eine Schaltfläche angewendet wird:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

In diesem Fall ist der Schatten horizontal und vertikal um 5px versetzt, hat einen Unschärferadius von 10px und ist mit Schwarz mit 0,3 von gefärbt Opazität.

Beispiel: Eingefügte Schatten

box-shadow unterstützt auch das Schlüsselwort inset, das den Schatten innerhalb des Elements platziert und ihm so einen vertieften Effekt verleiht.

div { box-shadow: inset 0 0 10px #000; }

div {
  box-shadow: inset 0 0 10px #000;
}

Hier wird der Schatten innerhalb des

div platziert, wodurch ein Effekt entsteht, als ob der Inhalt nach innen verschoben würde.

Erweiterte Tipps

Sie haben die Möglichkeit, mehrere Schatten zu erstellen, indem Sie jede
• Box-Shadow-Spezifikation durch ein Komma abgrenzen. Diese Technik ermöglicht die Erstellung komplexer, vielschichtiger Schatteneffekte.

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

div {
  box-shadow: inset 0 0 10px #000;
}

Schatteneffekte werden häufig verwendet, um Hover-Interaktionen zu erzeugen und die Interaktivität von Schaltflächen oder Karten zu verbessern.

button:hover { Box-Shadow: 5px 10px 20px rgba(0, 0, 0, 0,4); }

div {
  box-shadow: inset 0 0 10px #000;
}

Für diejenigen, die einen visuelleren Ansatz bevorzugen, schauen Sie sich den Box-Shadow-CSS-Generator an. Mit diesem Tool können Sie mühelos benutzerdefinierte Box-Shadow-Effekte erstellen, ohne Code schreiben und Voreinstellungen speichern zu müssen.