CSS-Box-Shadow-Generator

Aufbau der box-shadow-Eigenschaft

Ein einzelner box-shadow ist eine Liste von Werten in fester Reihenfolge: horizontaler Versatz, vertikaler Versatz, Weichzeichnungsradius, Ausbreitungsradius und Farbe, mit einem optionalen inset-Schlüsselwort. Nur die beiden Versätze und die Farbe sind erforderlich; Weichzeichnung und Ausbreitung sind standardmäßig null. Die Kurzform, die sich als 0px 4px 12px rgba(0, 0, 0, 0.15) liest, bedeutet also keine horizontale Bewegung, vier Pixel nach unten, zwölf Pixel Weichzeichnung, keine Ausbreitung und ein Schwarz mit 15 Prozent. Die Regler in diesem Tool schreiben Ihnen genau diesen String, doch die Reihenfolge zu verstehen macht das Bearbeiten von Hand mühelos.

Die Versätze platzieren den Schatten relativ zur Box. Ein positiver vertikaler Versatz verschiebt den Schatten nach unten, was Sie für die verbreitete Illusion einer Lichtquelle über dem Element wollen; ein negativer Wert hebt ihn an. Der horizontale Versatz funktioniert genauso von links nach rechts. Versätze sind der mit Abstand stärkste Hinweis, mit dem Ihr Gehirn beurteilt, wie hoch ein Element schwebt – greifen Sie also vor allem anderen zu ihnen.

Weichzeichnung und Ausbreitung: die beiden Radien, die verwechselt werden

Der Weichzeichnungsradius steuert, wie weich der Rand ist. Bei null erhalten Sie ein hartkantiges Duplikat der Box; je größer die Weichzeichnung, desto über ein breiteres Band verblasst der Schatten und desto mehr ähnelt er echtem, diffusem Licht. Die meisten natürlichen Schatten verwenden eine Weichzeichnung, die ungefähr das Zwei- bis Dreifache des vertikalen Versatzes beträgt. Beachten Sie, dass die Weichzeichnung nicht negativ sein kann.

Die Ausbreitung ist der Wert, den fast niemand setzt, und sie ist mächtig. Eine positive Ausbreitung bläht den Schatten in jede Richtung nach außen auf, bevor die Weichzeichnung angewendet wird, und macht ihn größer als die Box; eine negative Ausbreitung verkleinert ihn. Eine winzige negative Ausbreitung, kombiniert mit einem Versatz nach unten und großzügiger Weichzeichnung, ist das klassische Rezept für einen Schatten, der sich eng unter eine Karte schmiegt, statt an den Seiten herauszuquellen. Die Ausbreitung ist außerdem die Art, wie Sie einen massiven Ring zeichnen: kein Versatz, keine Weichzeichnung, ein paar Pixel positive Ausbreitung und eine flache Farbe.

Inset-Schatten für eingedrückte und vertiefte Flächen

Das Hinzufügen des inset-Schlüsselworts zeichnet den Schatten innerhalb des Elements statt dahinter, sodass die Fläche eingraviert erscheint. So lassen Sie ein Textfeld wie eine Vertiefung aussehen, einen Schalter wie heruntergedrückt oder ein Panel wie in die Seite eingelassen. Die Versätze zeigen nun auf die innere Kante, die den Schatten auffängt, sodass ein Versatz nach unten die obere Innenkante abdunkelt und Licht nachahmt, das von oben einfällt. Schalten Sie die Inset-Option in diesem Tool um, um zwischen einem äußeren und einem inneren Schatten zu wechseln, und beobachten Sie, wie dieselben Zahlen ihre Bedeutung umkehren.

Mehrere Schatten überlagern

Die box-shadow-Eigenschaft akzeptiert eine kommagetrennte Liste, und der Browser zeichnet jeden Schatten der Reihe nach, mit dem ersten obenauf. Das ist der einzelne nützlichste Trick für realistische Tiefe. Echte Objekte werfen nicht einen Schatten; sie werfen einen engen, dunkleren Kontaktschatten direkt unter der Kante und einen breiteren, schwächeren Umgebungsschatten weiter draußen. Einen kleinen Schatten mit geringer Weichzeichnung über einen großen mit starker Weichzeichnung zu stapeln, bildet das nach, und das Ergebnis wirkt weit glaubwürdiger als jeder einzelne Schatten es könnte.

Das Überlagern ist außerdem die Art, wie Designsysteme Erhebungsskalen aufbauen: Eine Erhebung im Material-Stil besteht typischerweise aus zwei oder drei gestapelten, aufeinander abgestimmten Schatten, und eine Karte um eine Stufe anzuheben tauscht den ganzen Stapel aus, statt eine einzelne Zahl zu verschieben. Sie können sogar einen Inset-Schatten mit Außenschatten in derselben Deklaration mischen, um eine beleuchtete Kante und einen geworfenen Schatten zugleich zu erhalten.

Beispiel: ein weicher Kartenschatten

Hier ist ein Rezept, das auf nahezu jeder hellen Fläche gut aussieht. Beginnen Sie ohne horizontalen Versatz, damit der Schatten zentriert bleibt, mit einem vertikalen Versatz von etwa 8px, einer Weichzeichnung von rund 24px und einer Ausbreitung von etwa minus 6px, sodass er sich unter die Karte schmiegt. Verwenden Sie eine fast schwarze Farbe, senken Sie aber die Deckkraft auf rund 12 Prozent, ausgedrückt als rgba(0, 0, 0, 0.12). Die negative Ausbreitung hält den weichen Rand davon ab, über die Ecken hinauszubluten, die niedrige Deckkraft verhindert, dass er wie ein Schmierfleck aussieht, und der moderate Versatz suggeriert ein sanftes Licht von oben. Für ein besonders scharfes Ergebnis überlagern Sie einen zweiten Schatten mit 1px Versatz, nahezu null Weichzeichnung und rund 6 Prozent Schwarz, um eine scharfe Kontaktlinie vorzutäuschen.

Häufige Fehler und wie man sie vermeidet

Der häufigste Fehler ist ein vollständig deckender, rein schwarzer Schatten mit hoher Weichzeichnung, der schlammig und künstlich wirkt statt wie Licht. Farbige Hintergründe verschlimmern das: Ein schwarzer Schatten über einem gesättigten Blau wirkt schmutzig, tönen Sie den Schatten also stattdessen in Richtung des Hintergrundfarbtons. Ein weiterer Fehler ist, die Ausbreitung als zweite Weichzeichnungssteuerung zu behandeln; das ist sie nicht, und sie bei null zu lassen, während man die Weichzeichnung aufdreht, ist der Grund, warum sich manche Schatten zugleich unscharf und zu klein anfühlen.

Man verwechselt box-shadow auch mit dem drop-shadow-Filter. box-shadow folgt stets der rechteckigen Box des Elements, einschließlich seines border-radius, sodass ein transparentes PNG innerhalb der Box dennoch einen rechteckigen Schatten erhält. Der Filter drop-shadow zeichnet die tatsächlichen nicht transparenten Pixel nach, was Sie für unregelmäßige Formen und freigestellte Bilder wollen. Verwenden Sie box-shadow für Karten, Schaltflächen und Panels; greifen Sie zum Filter, wenn die Silhouette kein Rechteck ist.

Leistung und die Falle der großen Weichzeichnung

Schatten werden vom Browser gezeichnet, und sehr große Weichzeichnungsradien sind wirklich aufwendig, besonders wenn sie animiert werden oder auf vielen Elementen zugleich erscheinen. Die Weichzeichnung oder Ausbreitung eines großen Schattens zu animieren kann in jedem Frame Neuzeichnungen auslösen und auf schwächeren Geräten ruckeln. Wenn ein Schatten beim Überfahren wachsen soll, ist ein flüssigerer Ansatz, den größeren Schatten auf einem Pseudoelement vorzurendern und stattdessen seine Deckkraft zu animieren, da Deckkraft günstig zu kompositieren ist. Halten Sie Weichzeichnungswerte vernünftig, vermeiden Sie Hunderte beschatteter Knoten gleichzeitig auf dem Bildschirm, und Ihre Oberflächen bleiben flüssig.