So fügen Sie einem Element einen Schatten hinzu

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 gängiges Designelement, das dazu beitragen kann, dass Elemente auf Ihrer Seite hervorstechen. In CSS werden Schatten auf den Kästen von Elementen mit der box-shadow-Eigenschaft erstellt (wenn Sie dem Text selbst einen Schatten hinzufügen möchten, verwenden Sie text-shadow).

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

Die Verschiebung auf der x-Achse
Die Verschiebung auf der y-Achse
Ein Unschärferadius
Ein Ausbreitungsradius
Eine Farbe
Das inset-Schlüsselwort

Im Beispiel unten haben wir die X- und Y-Achse auf 5px gesetzt, die Unschärfe auf 10px und die Ausbreitung auf 2px. Ich verwende eine halbtransparente schwarze 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: white;
}

css

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

Hinweis: In diesem Beispiel verwenden wir inset nicht, was bedeutet, dass der Schatten der Standard-Abfall-Schatten ist und die Box über dem Schatten liegt. Eingefügte Schatten erscheinen innerhalb der Box, als ob der Inhalt in die Seite gedrückt wäre.