Anleitung zum Hinzufügen eines Schattens zu einem Element

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

Hinzufügen von Kastenschatten

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

Die box-shadow-Eigenschaft erfordert mehrere Werte:

Die Versetzung auf der x-Achse
Die Versetzung auf der y-Achse
Ein Unschärferadius
Ein Ausbreitungsradius
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 Ausbreitung auf 2px gesetzt. Ich verwende einen halbtransparenten Schwarzton als 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: In diesem Beispiel verwenden wir inset nicht, das bedeutet, dass der Schatten der standardmäßige Schlagschatten ist, wobei der Kasten oben auf dem Schatten liegt. Eingefügte Schatten erscheinen innerhalb des Kastens, als ob der Inhalt in die Seite zurückgedrückt würde.