CSS Box Shadow Tutorial: Eine Schritt-für-Schritt-Anleitung (+ Beispiele)

Warum verdient die CSS-Eigenschaft box-shadow ein eigenes Tutorial? Denn wie Sie unten sehen werden, ist es eine der komplexeren Eigenschaften, die mehrere Werte gleichzeitig annimmt. Dies kann besonders für Anfänger eine Herausforderung darstellen.

Wenn Sie sich bisher mit der richtigen Verwendung von box-shadow schwer getan haben, sind Sie hier genau richtig. In der folgenden Anleitung gehen wir auf alles ein, was Sie über diese CSS-Eigenschaft wissen müssen. Wir werden darüber sprechen, was es tut, wie man seine Syntax richtig verwendet, einige coole CSS box-shadow Beispiele und schließlich einige Generator-Tools, die die Arbeit damit erleichtern.

Was ist CSS Box Shadow?

Auch wenn Sie die CSS box-shadow Eigenschaft bisher nicht kennen, haben Sie sie wahrscheinlich im Web in Aktion gesehen.

Oben ist ein gutes Beispiel dafür, wie es in freier Wildbahn aussieht (auch wenn ich es hier etwas erhöht habe, um es deutlich zu machen). box-shadow ist im Grunde das, was der Name sagt: Es ermöglicht Ihnen, dem Rahmen von fast jedem Element einen Schlagschatten hinzuzufügen. Der Schatten passt sich auch an die Form seines Ankers an, egal ob quadratisch, rechteckig, rund oder oval. Dies gilt sogar dann, wenn Sie eine Eigenschaft border-radius festgelegt haben.

Im Internet wird es verwendet, um eine Reihe verschiedener Effekte zu erstellen, und wir werden unten einige interessante Beispiele für box-shadow sehen. Lassen Sie uns zunächst darüber sprechen, wie es auf der grundlegendsten Ebene funktioniert.

Grundlegende Box-Shadow-Syntax

Wenn Sie sich ein Element mit einem Kastenschatten mit Browser-Entwicklertools ansehen, werden Sie folgendes Markup finden:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Sieht etwas kompliziert aus, oder?

Aber keine Sorge, Sie brauchen nicht immer alle diese Deklarationen. Sobald Sie verstehen, wie sie funktionieren, erscheint es außerdem nicht mehr so ​​verwirrend wie am Anfang.

Wie Sie oben sehen können, kann box-shadow bis zu sechs Werte annehmen. Gehen wir sie nacheinander durch.

offset-x

Der erste Wert ist der horizontale Abstand des Schlagschattens von der Seite seines Ankerelements. Ein positiver Wert verschiebt ihn nach rechts, ein negativer nach links.

Sie können alle gängigen CSS-Datentypen verwenden, die die Länge für diesen Wert angeben, wie px , em , vh und mehr. Die am häufigsten verwendeten sind px und em .

offset-y

Dasselbe wie oben, jedoch für die vertikale Achse. Positive Werte verschieben den Schatten unter das Element, negative darüber.

Unschärferadius

Dies definiert die Unschärfe des Kastenschattens. Je höher der Wert, desto unschärfer wird es. blur-radius auch alle gängigen CSS-Längenbezeichnungen, aber keine negativen Werte.

Spread-Radius

Dieser steuert die Ausbreitung des Schattens über die Höhe oder Breite seines Elements hinaus. Je höher die Länge, desto größer der Spread. Sie können auch negative Zahlen verwenden, um eine Schrumpfung einzuführen.

Farbe

Wie Sie wahrscheinlich erraten können, können Sie damit die Farbe des Box-Schattens auf alle üblichen Arten definieren. Er wird meistens in hexadezimalen (z. B. #ededed ) oder rgba (z. B. rgba(46, 182, 142, 0.9) ) Werten angegeben. Mit letzterem können Sie auch die Deckkraft steuern, die häufig für Schlagschatten verwendet wird.

Beachten Sie, dass der Browser die aktuell verwendete Textfarbe verwendet, wenn Sie keine Farbe festlegen.

Einsatz

Schließlich können Sie am Anfang der Deklaration optional einen inset hinzufügen. Dadurch ändert sich der Schatten von einem Schlagschatten zu einem Schatten innerhalb des Elements. Es erscheint innerhalb des Rahmens, über dem Hintergrund, aber unter dem Inhalt des Elements, sodass es beispielsweise keinen Text verdeckt.

Verwenden der Werte in der Reihenfolge

Hier ist die Reihenfolge, in der die Werte der Eigenschaft box-shadow angezeigt werden.

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

Um einen Boxschatten zuzuweisen, benötigen Sie mindestens zwei Längenwerte. Der Browser verwendet diese automatisch für offset-x und offset-y . Wenn Sie ein drittes hinzufügen, wird es als blur-radius interpretiert, ein viertes als spread-radius . inset und color sind optional und können am Ende oder am Anfang und in beliebiger Reihenfolge erscheinen. Die CSS unten haben alle das gleiche Ergebnis.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

Mehrere Kastenschatten zuweisen

Was nicht jedem bewusst ist, ist, dass Sie für dasselbe Element mehrere Rahmenschatten festlegen können. Geben Sie dazu einfach mehr als eine Gruppe von Werten an und trennen Sie diese durch Kommas.

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

Der obige Code sieht folgendermaßen aus:

Sie können dies auch verwenden, um Linien um Elemente zu erstellen. Dazu müssen Sie einfach mehrere Schatten in verschiedenen Farben hinzufügen und deren Versatz und Unschärfe auf Null setzen.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Dadurch entstehen Umrisse mit unterschiedlichen Farben:

Beachten Sie, dass sich dies nicht auf die Abmessungen des Boxmodells auswirkt, daher tragen border nicht zur Gesamtgröße eines Elements bei, wie es margin oder Rahmen tun.

Browser-Kompatibilität

Die Browserkompatibilität für box-shadow ist nicht wirklich etwas, worüber Sie sich Sorgen machen müssen. Es ist eine sehr etablierte CSS-Eigenschaft, die von praktisch jedem Browser akzeptiert wird, einschließlich Markup wie inset und mehrere Schatten.

Um ältere Versionen einiger Browser zu unterstützen, ist es üblich, die -webkit-box-shadow und -moz-box-shadow mit denselben Werten einzuschließen. Für die neuesten Versionen der gängigsten Browser ist dies jedoch nicht mehr erforderlich.

Beispiele für CSS-Box-Schatten

Als nächstes wollen wir in diesem box-shadow Tutorial einige Beispiele für CSS-Box-Schatten durchgehen, damit Sie sehen können, was mit dieser Eigenschaft möglich ist. Wir werden von eher Standardanwendungen zu außergewöhnlicheren Anwendungen übergehen, weil Sie, wie Sie sehen werden, einige wirklich aufregende Dinge damit machen können.

Fügen Sie einem Button einen Schatten hinzu

Schaltflächen sind oft ein Element, auf das ein Kastenschatten angewendet wird. Das liegt daran, dass es eine gute Möglichkeit ist, sie auf der Seite hervorzuheben. Wenn Sie eine Schaltfläche einfügen, möchten Sie schließlich, dass die Leute darauf klicken. Um sie dazu aufzufordern, hier ein einfaches Beispiel, wie man das mit einem Box-Schatten machen kann.

Das zugehörige Markup sieht folgendermaßen aus:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Weicher Kastenschatten

Wenn Sie einen relativ weichen CSS-Box-Schatten erstellen möchten, arbeiten Sie meistens mit Weichzeichnen und Spreizen, während Sie die Offsets auf 0 setzen. Auf diese Weise erhält der Schatten keine ausgeprägte Form, sondern erscheint nur weich an den Rändern.

Um den obigen Effekt zu erzielen, können Sie das folgende Markup verwenden:

 box-shadow: 0 0 50px 10px #999;

Dies ist auch eine großartige Möglichkeit, einen Kastenschatten auf allen Seiten eines Elements zu erstellen. Wenn Sie es deutlicher machen möchten, drehen Sie einfach die Ausbreitung auf, schwächen Sie die Unschärfe ab und verwenden Sie eine dunklere Farbe.

Mehrere Kastenschatten

Die letzten box-shadow Beispiele dienen der gleichzeitigen Verwendung mehrerer Schatten. Dies bietet verschiedene Möglichkeiten. Zum einen können Sie einen coolen, verblassenden, mehrstufigen Box-Schatten einführen.

Es ist überraschend einfach: Sie müssen nur Kästchenschatten mit gleichmäßig zunehmenden Versätzen übereinander stapeln und gleichzeitig die Deckkraft verringern. Übrigens, wenn Sie viele Box-Schatten verwenden, hilft es, die Deklarationen in separate Zeilen zu schreiben, anstatt als eine lange Deklaration. Macht es viel einfacher zu verstehen.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

Sie können dies auch weiterführen, indem Sie White-Box-Schatten mit einem negativen spread-radius Wert dazwischen einfügen, was zu der Illusion führt, dass mehrere Elemente übereinander liegen.

Warum der negative Spread-Wert? Denn sonst würden die Schatten der weißen Kästchen die darunter liegenden überdecken. Der negative Wert schrumpft sie, sodass die Farbe dahinter durchscheinen kann. Unten ist das Markup, das Sie benötigen, wenn Sie einen ähnlichen Effekt auf Ihrer eigenen Website einführen möchten:

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

Das letzte Beispiel für mehrere CSS-Box-Schatten ist die oben erwähnte Methode, Offsets und Blur auf 0 zu setzen. Wie wir oben gesehen haben, führt dies dazu, dass das Element mehrere Umrisse hat, in diesem Fall bunte. Dies funktioniert jedoch nur, weil der spread-radius Wert mit jedem Box-Schatten zunimmt.

Wenn Sie dies selbst ausprobieren möchten, können Sie damit beginnen:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

Die besten Box-Schattengeneratoren

Wie wir bereits erwähnt haben, nimmt box-shadow eine ganze Menge Werte an. Daher kann es ein wenig Versuch und Irrtum dauern, bis Sie zu der Art von Schatten kommen, die Sie möchten.

Um es einfacher zu machen, gibt es eine ganze Reihe von Box-Shadow-Generator-Tools, mit denen Sie mit ihren Steuerelementen spielen, die Ergebnisse sofort sehen und dann einfach das Markup kopieren können, sobald Sie zufrieden sind.

Hier sind die besten Optionen für Box-Schattengeneratoren:

• box-shadow.dev – Dieses Einzweck-Tool hat alle Funktionen, die Sie brauchen, und die beste Benutzeroberfläche der Gruppe. Sie können inset verwenden, mehrere Box-Schatten erstellen, die Offsets, Unschärfe und Ausbreitung über Schieberegler steuern und Farben manuell eingeben. Wenn Sie zufrieden sind, klicken Sie auf Code anzeigen, um das CSS-Markup zu kopieren. Der einzige Nachteil ist, dass es keinen Code für ältere Browser bereitstellt.
• CSSmatic Box Shadow CSS Generator – Ähnlich wie oben. Ermöglicht es Ihnen, die box-shadow Eigenschaften über Schieberegler zu steuern und auch Zahlen manuell einzugeben. Hat eine eigene Steuerung für die Deckkraft, was schön ist. Andererseits fehlt die Funktionalität für mehrere Schatten. Das Code-Markup, das Sie erhalten, enthält ältere Browser.
• Box Shadow CSS Generator – Eine solide Option, die auch eine Farbauswahlfunktion hat und Ihnen auch Code für ältere Browser bietet. Sie können es mit einem einfachen Klick kopieren. Es hat eine Deckkraftsteuerung, kann aber nur einen Schlagschatten erzeugen.
• CSS3gen CSS3 Box Shadow Generator – Ein weiterer Schlagschatten-Generator. Eine coole Funktion hier ist, dass Sie anstelle von x- und y-Offsets den Schattenwinkel und -abstand auswählen können und das Tool den Rest automatisch erledigt. Aus irgendeinem Grund haben spread-radius und inset ihr eigenes Menü. Das CSS, das Sie einfach kopieren und einfügen können, enthält auch Markups für ältere Browsergenerationen.

Abschließende Gedanken: CSS Box Shadow

Die box-shadow Eigenschaft kann zunächst überwältigend sein. Es ist eine dieser Eigenschaften, die viele Werte benötigt, sodass es möglicherweise komplizierter aussieht, als es tatsächlich ist. Hoffentlich hat dieses CSS-Box-Shadow-Tutorial dieses Gefühl beseitigt.

Oben haben wir besprochen, was CSS box-shadow ist und wie es funktioniert. Wir haben die Syntax, Werte und ihr Zusammenspiel erklärt. Darüber hinaus haben wir eine Reihe von Beispielen für die Verwendung von CSS-Box-Schatten im wirklichen Leben durchgesehen, einschließlich Markup, das Sie sofort verwenden können. Schließlich haben wir für diejenigen, die ein wenig Hilfe benötigen, eine Reihe von CSS box-shadow Generatoren aufgelistet, die einen Großteil der schweren Arbeit für Sie erledigen können.

Inzwischen sollten Sie sich in der Lage fühlen, diese CSS-Funktion auf Ihrer Website zu verwenden. Wir sind gespannt, was Sie daraus machen.

Wie verwenden Sie CSS Box Shadow auf Ihrer Website? Irgendwelche spannenden Anwendungsfälle, die wir oben nicht behandelt haben? Lass es uns in den Kommentaren unten wissen!