Jahrelang sahen meine Schatten falsch aus und ich konnte nicht herausfinden, warum. Ich würde schreiben box-shadow: 0 5px 10px black„Sorgen Sie sich einen schlammigen grauen Heiligenschein, entschärfen Sie ihn und machen Sie weiter, weil Sie sich vage unzufrieden fühlten. Die Karte sah aus, als hätte sie einen blauen Fleck, keinen Schatten. Erst als ich anfing, die von mir bewunderten Designsysteme auseinanderzureißen - die, bei denen Karten wirklich zu schweben scheinen -, wurde mir der Trick klar. Sie verwenden nie einen Schatten. Sie stapeln zwei oder drei, jeder erledigt eine andere Arbeit, und das Ergebnis liest sich so, wie sich Licht verhält, wie sich Licht tatsächlich verhält.
Ich baue beruflich Schnittstellen in React und Tailwind, pflege ein WordPress-Admin-Theme in WP Adminify, wo Schatten einen Großteil der visuellen Hierarchie tragen, und habe das erstellt CSS-Box-Schattengenerator Auf Toolz.dev, weil ich es satt hatte, mehrschichtige Schatten in einem Texteditor von Hand abzustimmen und neu zu laden, um das Ergebnis zu sehen Dieser Leitfaden ist alles, was ich über die box-shadow Eigenschaft: Was jeder Wert bewirkt, warum das Schichten funktioniert, wie man die üblichen Fallen vermeidet und wie man den Generator verwendet, um in ein paar Minuten von einem leeren Element zum Produktions-CSS zu gelangen.
tl; dr: EIN CSS
box-shadowNimmt einen X-Offset, einen Y-Offset, einen Unschärferadius, einen Spreizradius und eine Farbe an, optionalinsetStichwort. Unschärfe macht den Rand weich; Spread wächst oder verkleinert den Schatten, bevor er verschwimmt Echte Elevation entsteht durch das Stapeln mehrerer kommagetrennter Schatten, nicht durch das Kurbeln eines Schattens' s Opazität Verwenden Sie Schwarz mit geringer Opazität, einen kleinen Y-Offset, großzügige Unschärfe und eine leicht negative Spreizung - kopieren Sie dann das CSS direkt vom Generator.
Was macht eigentlich die Box-Shadow-Eigenschaft?
box-shadow Malt einen oder mehrere Schatten um ein Element & #39; s Randfeld, und die Eigenschaft ist angegeben in CSS-Hintergründe und -Grenzen Level 3. Die Syntax für einen einzelnen Schatten sieht folgendermaßen aus:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
Die Offsets sind erforderlich; Unschärfe, Spreizung und Farbe sind optional, aber Sie werden sie fast immer einstellen. Hier ist, was jeder steuert, so wie ich beim Stimmen darüber nachdenke:
Offset X Bewegt den Schatten horizontal Positive Werte drücken ihn nach rechts, negativ nach links Bei den meisten Schnittstellenschatten will man das bei oder nahe Null, denn Licht in der realen Welt kommt meist von oben, wirft Schatten gerade nach unten statt zur Seite.
Versatz Y Verschiebt den Schatten vertikal Positive Werte drücken ihn nach unten, was Sie für ein Element wünschen, das scheinbar über der Seite sitzt Dies ist der einzelne Wert, der am meisten steuert, wie & quot; high" das Element fühlt.
Unschärferadius Weicht den Schatten auf' s-Kante Ein Wert von Null ergibt einen hartkantigen Schatten wie eine feste Form; größere Werte verteilen die Weichheit Das kann nicht negativ sein Fast jeder natürlich aussehende Schatten verwendet eine Unschärfe, die um ein Vielfaches größer ist als sein Y-Offset.
Spreizradius Größe des Schattens verändert, bevor die Unschärfe aufgetragen wird Positive Streuung macht den Schatten in jede Richtung größer; negative Streuung schrumpft ihn Negative Streuung ist die Geheimwaffe für enge, glaubwürdige Kartenschatten, denn sie zieht den Schatten hinein, damit er nicht über das Element hinaus ausblutet.
Farbe Ist jede gültige CSS-Farbe Die besten Schnittstellenschatten verwenden Schwarz oder nahezu Schwarz bei geringer Opazität - so etwas wie rgba(0, 0, 0, 0.1) - und nicht ein völlig undurchsichtiges Grau, denn ein durchscheinendes Schwarz tönt alles, was sich dahinter verbirgt, so wie es ein echter Schatten tut.
Warum verwenden gute Schatten mehr als eine Ebene?
Das ist die Idee, die meine Schatten komplett verändert hat, also bekommt sie einen eigenen Ausschnitt Ein einzelner Schatten ist ein einzelner, gleichmäßiger Klecks Echte Schatten sind nicht einheitlich Nahe am Objekt ist der Schatten dunkler und schärfer; weiter entfernt ist er heller und diffuser, diesen Abfall nähert man sich an, indem man Schatten stapelt.
Ein klassisches Rezept besteht aus zwei Schichten: einem engen, etwas dunkleren Schatten, der nahe am Element sitzt und ihm eine knackige Basis verleiht, dazu ein weicherer, breiterer, hellerer Schatten darunter, der für die Umgebungsdiffusion sorgt So etwas wie:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
Der Browser malt kommagetrennte Schatten der Reihe nach, wobei die erste oben liegt Jede Ebene ist billig, und zwei oder drei zusammen lesen sich als echte Tiefe auf eine Weise, die kein einzelner Schatten kann, egal wie man ihn abstimmt Genau aus diesem Grund ist der Generator um Schichten herum aufgebaut und nicht um einen einzigen Satz Schieberegler - den CSS-Box-Schattengenerator Schiffe mit Voreinstellungen wie Card, Elevated und Floating, die alle mehrschichtig sind, sodass Sie von einer realistischen Basis anstelle eines einsamen Klecks ausgehen.
Das von mir verwendete Denkmodell: in Höhenlagen denken Eine Ruhekarte sitzt tief mit einem kleinen, engen Schatten Ein Dropdown oder Popover sitzt höher mit einem größeren, weicheren Ein Modal sitzt am höchsten von allen, Erhöhen bedeutet, den Y-Offset zu erhöhen und über alle Schichten hinweg zu verschwimmen, nicht nur einen Schatten abzudunkeln.
Wie erzeuge ich einen inneren Schatten?
der inset Stichwort wirft einen Schatten im Inneren des Elements um' s Polsterkasten statt nach außen zu werfen Hinzufügen inset Vorne eine Schattenerklärung und sie malt innerhalb des Elements:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Innere Schatten sind, wie man ein Steuerelement eindrücken, versenken oder eingravieren lässt Eine Texteingabe liest sich oft besser mit einem subtilen eingelegten Schatten, der auf einen Brunnen hindeutet, in dem der Text sitzt Ein gedrückter Knopfzustand kann seinen äußeren Schatten gegen einen inneren austauschen, um sich physisch deprimiert zu fühlen Und der gesamte Neumorphismus-Trend basiert auf der Kopplung eines aus einer Richtung eingelassenen Lichts mit einem dunklen Einsatz aus der anderen Im Generator ist der Einschub ein einzelner Umschalter pro Schicht, sodass Sie Einschub- und Anfangsschatten im selben Element mischen können - was genau neumorphe Oberflächen benötigen.
Wie verwende ich den Box Shadow Generator?
Der Flow ist passend zu meiner eigentlichen Arbeitsweise gestaltet Öffnen Sie die CSS-Box-Schattengenerator Und Sie landen auf einem Vorschauelement mit einer bereits angewendeten realistischen Kartenvoreinstellung, sodass Sie nie auf eine leere Leinwand starren.
Wählen Sie eine Voreinstellung, um nah an das heranzukommen, was Sie wollen - Subtil, Karte, Erhöht, Schwimmend, Inner, Glühend, Neumorphisch oder Sharp. Jeder lädt seinen vollständigen Layer-Stack. Dann wählen Sie eine Ebene aus und stimmen Sie sie mit den Schiebereglern ab: Offset X, Offset Y, Unschärfe und Spread haben jeweils ihre eigene Steuerung, plus einen Farbwähler, einen Deckungsschieber und den Einschub-Umschalter. Die Vorschau-Updates werden beim Ziehen live ausgeführt, sodass Sie den Schatten direkt formen, anstatt Zahlen zu bearbeiten und sich das Ergebnis vorzustellen.
Wenn du mehr Tiefe brauchst, füge eine Ebene hinzu, wenn eine Ebene nichts Nützliches tut, entferne sie Es gibt einen Hintergrund-Toggle, der die Vorschau zwischen hell und dunkel umschaltet, was zählt, weil ein Schatten, der auf einer hellen Karte perfekt aussieht, verschwinden kann oder sich auf einem dunklen in einen hässlichen grauen Ring verwandeln kann Beides vor dem Versand zu überprüfen, spart eine Hin - und Rückfahrt.
Wenn du glücklich bist, kopiere das CSS. Du kannst die Ebene greifen box-shadow Deklaration, oder eine Sperre, die auch die -webkit-box-shadow Präfix, wenn Sie sehr alte WebKit-Builds unterstützen müssen Fügen Sie es in Ihr Stylesheet, Ihre Styled-Komponente oder Ihren Tailwind-Willkürwert ein und Sie sind fertig.
Wie jedes Tool auf der Seite läuft es komplett in deinem Browser, es wird nichts hochgeladen und es funktioniert auch offline nach dem Laden weiter, das ist der gleiche clientseitige Ansatz, den ich in der Datenschutz-Leitfadendrohen
Anwendungsfälle in der realen Welt
Aufbau einer Höhenskala für ein Entwurfssystem
Wenn ich ein neues Projekt aufsetze, definiere ich einen festen Satz von Höhenstufen, anstatt jede Komponente ihren eigenen Schatten erfinden zu lassen Normalerweise sind das vier oder fünf Schritte von & quot; ruhende Karte" bis zu "modal." Ich baue jede einzelne im Generator, kopiere den CSS und lasse sie als benannte Werte in meine Design-Token fallen Jede Karte, jedes Menü und jeder Dialog verweist dann auf eine Ebene, sodass das gesamte Produkt ein einheitliches Beleuchtungsmodell teilt Dies von Hand in einem Texteditor zu tun, ist miserabel; es dauert einige Minuten, es mit einer Live-Vorschau zu tun.
Eine Karte tatsächlich schweben lassen
Der Standardinstinkt ist ein einzelner dunkler Schatten, der aufgeklebt aussieht. Das Problem ist das zweischichtige Rezept: eine dichte Schicht mit einem kleinen Y-Versatz und einem negativen Spread zur Verankerung der Karte und eine breitere, weichere Schicht darunter für Umgebungslicht. Beginnen Sie mit der Karte oder der erhöhten Voreinstellung, stupsen Sie die Werte nach Geschmack an und Sie erhalten eine Karte, die wie angehoben und nicht umrissen lautet.
Entwerfen gepresster und fokussierter Zustände
Interaktives Feedback lebt oft im Schatten Eine Taste kann den größten Teil ihres äußeren Schattens verlieren und einen kleinen Einschub auf Drücken erhalten, um sich physisch gedrückt zu fühlen. Eine Eingabe kann einen permanenten subtilen Einschub tragen, um wie ein Brunnen auszusehen. Diese lassen sich schnell prototypisieren, indem man den Einschub umschaltet und die Vorschau ansieht, und sie fügen viel wahrgenommenen Lack für sehr wenig Code hinzu.
Neumorphe Flächen
Wenn Sie sich für den Soft-UI-Look entscheiden, benötigen Sie zwei Schatten auf demselben Element, die in entgegengesetzte Richtungen zeigen - einen dunklen nach rechts unten und einen hellen nach links oben -, sodass die Oberfläche aus dem Hintergrund herausgedrückt erscheint. Das Neumorphic-Preset stellt dies ein, und Sie stimmen Farbe, Deckkraft und Unschärfe so ab, dass sie Ihrem spezifischen Hintergrund entsprechen. Es funktioniert nur auf Hintergründen, die weder reinweiß noch reinschwarz sind, was Ihnen der Umschalter im dunklen Hintergrund bei der Überprüfung hilft.
Box-Shadow versus Filter: Drop-Shadow
Eine Frage, die ich oft bekomme: Wann sollte ich verwenden filter: drop-shadow() anstelle box-shadow? sie sehen ähnlich aus, verhalten sich aber anders, und die Wahl falsch verursacht echte Fehler.
| Feature | Kastenschatten | Filter: Drop-Shadow () |
|---|---|---|
| Folgt | Der rechteckige Randkasten | Die tatsächlich sichtbaren (nicht transparenten) Pixel |
| am besten für | Karten, Knöpfe, Panels, Eingänge | Logos, Symbole, PNGs mit Transparenz, unregelmäßige Formen |
| Unterstützt Einschub | ja | kein |
| Unterstützt Ausbreitung | ja | kein |
| Mehrere Schatten | Ja, kommagetrennt | Ja, durch Verkettung von Filtern |
| Beeinflusst Layout | kein | kein |
Die Kurzfassung: für ein normales rechteckiges Element verwenden box-shadow - es ist leistungsfähiger, es unterstützt Spread und Inset, und es ist das, was dieser Generator produziert Reichweite für drop-shadow() Nur wenn Sie den Schatten benötigen, um eine transparente oder unregelmäßige Form wie ein Logo oder ein ausgeschnittenes Symbol zu verfolgen, bei der ein rechteckiger Schatten falsch aussehen würde.
Fortgeschrittene Tipps und Fallen
Ein paar Dinge, von denen ich verbrannt wurde Zuerst werden Schatten abgeschnitten overflow: hidden Auf einem Vorfahren Wenn Ihr schöner Schatten auf mysteriöse Weise abgeschnitten wird, schneidet ein Vorfahr ihn ab - geben Sie entweder dem Schatten Raum oder bewegen Sie den overflow Anderswo herrschen. Weil box-shadow Beeinflusst niemals das Layout, es drückt nicht auf benachbarte Elemente, was ein Merkmal ist, aber es bedeutet auch, dass sich ein Schatten lautlos unter einem Geschwister erstrecken kann.
Zweitens können riesige Unschärfen bei vielen Elementen die Lackleistung kosten, insbesondere wenn sie animiert sind Wenn Sie einen Schatten auf dem Bildlauf animieren oder mit der Maus über eine lange Liste fahren, schauen Sie sich Ihre Bildrate an; manchmal ist es billiger, Deckkraft auf einem Pseudoelement zu animieren, das einen statischen Schatten hält Sobald Ihr CSS fertiggestellt ist, führen Sie es durch die CSS-Minifizierer Rasiert die zusätzlichen Bytes, die ausführliche mehrschichtige Schatten hinzufügen.
Drittens, vergessen Sie nicht, dass Schattenfarbe mehr als schwarz sein kann Ein sehr subtil getönter Schatten - eine dunkle Version Ihrer Oberfläche' s Farbton statt reinem Schwarz - sieht oft reicher aus als neutrales Grau, denn echte Schatten nehmen Umgebungsfarbe auf Es ist ein kleiner Zug mit einer unverhältnismäßigen Auszahlung.
Wenn Sie ein breiteres CSS-Toolkit zusammenstellen, ist die Leitfaden für Webentwickler-Toolkit Deckt ab, wo Schattenarbeit zwischen die anderen browserbasierten Dienstprogramme passt, und sobald Ihre Schatten fertig sind, wird die Gradientengenerator und Farbpflücker Oberflächenstyling abrunden Wenn Ihnen die Barrierefreiheit auf dem Herzen liegt, koppeln Sie diese mit dem Farbkontrast-Checker So bleibt der Inhalt, der auf Ihren schattierten Karten liegt, lesbar.
FAQ
Was ist die CSS-Box-Shadow-Eigenschaft?
Box-shadow fügt einen oder mehrere Schatten um ein Element hinzu' s-Frame. Jeder Schatten nimmt einen horizontalen Versatz, einen vertikalen Versatz, einen optionalen Unschärferadius, einen optionalen Spreizradius und eine Farbe, mit einem optionalen eingesetzten Schlüsselwort, um den Schatten im Inneren der Box zu zeichnen Mehrere Schatten werden durch Kommas getrennt und mit dem ersten oben gemalt.
Was ist der Unterschied zwischen Unschärfe und Ausbreitung?
Unschärferadius mildert den Schattenrand, so dass ein größerer Wert ihn diffuser macht Spread-Radius verändert den Schatten' s Größe, bevor sie verschwimmt: eine positive Ausbreitung lässt ihn in jede Richtung wachsen, während eine negative Ausbreitung ihn schrumpft, wodurch man einen Schatten fest unter einer Karte versteckt hält, anstatt an seinen Rändern vorbei zu bluten.
Wie erstelle ich einen inneren Schatten in CSS?
Fügen Sie das eingefügte Schlüsselwort zum Schatten hinzu. inset zeichnet den Schatten innerhalb des Elements' s Polsterbox statt außen, was für gedrückte Tasten, Eingabevertiefungen und neumorphe Oberflächen nützlich ist Durch Umschalten des Einsetzschalters im Generator wird dieser automatisch zur ausgewählten Ebene hinzugefügt.
Kann ich mehrere Box-Shadows für ein Element verwenden?
Ja. Man kann mehrere Schatten in einer einzigen durch Kommas getrennten Kastenschattendeklaration auflisten, und der Browser malt sie der Reihe nach mit dem ersten oben, einen weichen, breiten Schatten unter einen kleineren, dunkleren zu legen, ist die Standardmethode, um die Höhe realistisch aussehen zu lassen, anstatt ihn anzukleben.
Warum wird mein Box-Shadow abgeschnitten?
Ein Schatten wird abgeschnitten, wenn ein Vorfahre übergelaufen ist: versteckt oder wenn das Element am Rand eines Clipping-Containers sitzt Geben Sie dem Schattenraum oder verschieben Sie den Überlauf: Hidden Rule auf ein anderes Element Da Box-Shadow das Layout nicht beeinträchtigt, drückt es niemals benachbarte Elemente, sodass es sich auch lautlos unter einem Geschwisterstück erstrecken kann.
Was ist der Unterschied zwischen Box-Shadow und Filter: Drop-Shadow?
Box-shadow folgt dem Element' s rechteckiger Randkasten, ignoriert also transparente Bereiche innerhalb eines PNG oder einer unregelmäßigen Form. filter: drop-shadow () zeichnet die tatsächlich sichtbaren Pixel nach, was Logos und Icons mit Transparenz entspricht Für standardmäßige rechteckige Karten und Knöpfe ist Box-shadow die richtige Wahl und unterstützt Spread und Inset, dass Drop-Shadow dies nicht tut.
Benötige ich noch das Präfix -webkit- für Box-Shadow?
Für moderne Browser ist nein. box-shadow seit vielen Jahren unpräfixiert und wird weithin unterstützt. Der vorfixierte Block, den der Generator ausgeben kann, ist nur nützlich, wenn Sie sehr alte WebKit-Builds unterstützen müssen, und für die meisten Projekte reicht die Standard-Box-shadow-Eigenschaft allein aus.
Sendet dieser Box-Shadow-Generator meine Daten überall?
kein drohen Die Vorschau und CSS-Ausgabe werden vollständig in Ihrem Browser mit Javascript generiert. Es werden keine Werte hochgeladen oder gespeichert, und das Tool funktioniert nach dem Laden der Seite weiterhin ohne Netzwerkverbindung.
