Anleitung: Wie man einem Element einen Schatten hinzufügt

In diesem Leitfaden erfahren Sie, wie Sie einem beliebigen Kasten auf Ihrer Seite einen Schatten hinzufügen können.

Hinzufügen von Kastenschatten

Schatten sind ein häufiges Designelement, das dabei helfen kann, Elemente auf Ihrer Seite hervorzuheben. In CSS werden Schatten um die Kästen von Elementen mit der Eigenschaft box-shadow erstellt (wenn Sie dem Text selbst einen Schatten hinzufügen möchten, benötigen Sie text-shadow).

Die box-shadow-Eigenschaft nimmt eine Anzahl von Werten an:

Der Versatz auf der x-Achse
Der Versatz auf der y-Achse
Ein Unschärferadius
Ein Ausdehnungsradius
Eine Farbe
Das Schlüsselwort inset

Im folgenden Beispiel haben wir die X- und Y-Achsen auf 5px, die Unschärfe auf 10px und die Ausdehnung auf 2px gesetzt. Ich verwende ein halbtransparentes Schwarz als meine Farbe. Experimentieren Sie mit den verschiedenen Werten, um zu sehen, wie sie den Schatten verändern.

html

<div class="wrapper">
  <button class="shadow">box-shadow</button>
</div>

.wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  font-size: 140%;
  background-color: #db1f48;
  color: #fff;
}

css

.shadow {
  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
}

Hinweis: Wir verwenden in diesem Beispiel nicht inset, was bedeutet, dass der Schatten der standardmäßige Drop-Shadow ist, bei dem der Kasten über dem Schatten liegt. Inset-Schatten erscheinen innerhalb des Kastens, als ob der Inhalt in die Seite zurückgedrückt wurde.