Box Shadow CSS Tutorial - Hinzufügen eines Schlagschattens zu einem beliebigen HTML-Element

Mit der CSS-Eigenschaft können wir jedem HTML-Element einen Schlagschatten hinzufügen box-shadow. Hier ist wie.

Hinzufügen eines einfachen Schlagschattens

Lassen Sie uns zunächst einige grundlegende HTML-Elemente einrichten, um unsere Schlagschatten hinzuzufügen:

 Box1 Box2 Box3 

Fügen Sie dann einige grundlegende CSS hinzu:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

Das Ergebnis sind nur drei schwarze Kästchen, denen wir leicht Schlagschatten hinzufügen können, indem wir ihre eindeutigen IDs aufrufen:

Einrichtung von HTML-Elementen

Verwenden Sie zum Hinzufügen eines einfachen Schlagschattens die box-shadowEigenschaft in Feld 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Hinzufügen eines einfachen Schlagschattens zu Box 1

Wir haben hier 3 Parameter. Die ersten 2 sind der x-Versatz bzw. der y-Versatz. Sie legen die Position des Schlagschattens fest.

Der Versatz ist relativ zum Ursprung, der in HTML immer die obere linke Ecke eines Elements ist. Ein positiver x-Versatz verschiebt den Schatten nach rechts und ein positiver y-Versatz verschiebt den Schatten nach unten.

Der dritte Parameter ist die Farbe Ihres Schlagschattens.

Beachten Sie, dass die box-shadowEigenschaft , obwohl wir hier Elemente verwendet haben, auch auf jedes andere HTML-Element angewendet werden kann.

Hinzufügen eines Unschärferadius

Wenn der Schatten etwas realistischer aussehen soll, möchten wir mit dem blur-radiusParameter experimentieren .

Dieser Parameter steuert, wie stark der Schatten so verwischt werden soll, dass er größer und heller wird. Wenden wir es auf Box 2 an:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
Hinzufügen eines Unschärferadius zu Box 2

Der Wert 4px legt den Radius der Unschärfe fest, der auf unseren Schlagschatten angewendet werden soll.

Hinzufügen eines Ausbreitungsradius

Wenn wir die Größe des Schattens steuern möchten, können wir den spread-radiusParameter verwenden, der steuert, wie stark ein Schatten wächst oder schrumpft.

Fügen wir Box 2 einen Spreizradius von 8px hinzu:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Hinzufügen eines Ausbreitungsradius zusätzlich zu einer Unschärfe zu Box 2

Beachten Sie die Reihenfolge dieser Parameter!

Kombinieren mehrerer Schatten in einer einzigen Eigenschaft

Wenn wir Lust haben, können wir einem Element mit einer einzigen box-shadowEigenschaft mehrere Schlagschatten hinzufügen .

Machen wir das mit Box 3, indem wir gleichzeitig einen blauen und einen grünen Schlagschatten hinzufügen:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
Kombinieren Sie mehrere Schlagschatten

Bonus: Erstellen Sie einen eingefügten Schatten

Es wird zwar kein Schlagschatten erstellt, der insetParameter kann jedoch auch mit der box-shadowEigenschaft verwendet werden.

Wie der Name schon sagt, erzeugt dieser Parameter einen eingefügten Schatten (dh einen Schatten innerhalb einer Box).

Der insetParameter kann entweder am Anfang oder am Ende des platziert werden

box-shadowEigentum. Hier demonstrieren wir seine Verwendung mit einem blockquoteElement.

HTML:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Erstellen Sie einen eingefügten Schatten

Natürlich können Sie Unschärfe und Ausbreitung hinzufügen, um den Schatten zu verbessern, oder sogar mehrere Schatten:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Eingefügter Schatten kombiniert mit Schlagschatten

Mit der box-shadowEigenschaft können wir Elemente auf einer Webseite leicht hervorheben, um einen schönen 3D-Lichteffekt zu erzielen.

Wenn Sie selbst experimentieren möchten, finden Sie hier einen Codestift, den ich mit den in diesem Lernprogramm verwendeten Beispielen erstellt habe.

Spielen Sie herum und sehen Sie, was Sie sich einfallen lassen können!

Möchten Sie weitere Tipps und Kenntnisse zur Webentwicklung erhalten?

  • Abonnieren Sie meinen wöchentlichen Newsletter
  • Besuchen Sie meinen Blog bei 1000 Mile World
  • Folge mir auf Twitter