Ich habe ungefähr vierzig Minuten damit verbracht, einmal zu versuchen, einen Schatten aus einer Figma-Datei zusammenzufügen. Der Designer hatte mir eine Farbe, einen X- und Y-Offset, eine Unschärfe und eine Streuung gegeben, was alles ist, was man braucht, und ich konnte es immer noch nicht richtig sehen. Der Schatten im Browser war schwerer und flacher als das Modell, und ich stupste den Unschärferadius immer wieder auf und ab, so dass er behoben werden würde.
Das würde es nicht, denn das Mockup hatte zwei Schatten gestapelt Ein enger dunkler für den Kontakt, ein breiter weicher für Umgebungslicht Figma zeigte sie als separate Schichten in einem Panel, das ich zusammengebrochen hatte Sobald ich sie als kommagetrenntes Paar geschrieben hatte, war das Match sofort.
Das ist die Sache mit den CSS-Eigenschaften in diesem Ratgeber Keine davon ist kompliziert Alle haben ein oder zwei Verhaltensweisen, die aus der Syntax nicht ersichtlich sind, und man kann für jede von ihnen einen Nachmittag verlieren Dieser Ratgeber ist diese Verhaltensweisen, aufgeschrieben.
Jeder hier verlinkte Generator läuft in Ihrem Browser, aktualisiert beim Ziehen eine Live-Vorschau und gibt Ihnen das CSS. Ich baue sie bei [Toolz.dev] (/ und verwende sie ständig, vor allem weil das Lesen einer Vier-Werte-Kurzschrift schwieriger ist als das Betrachten eines Rechtecks.
tl; dr: einsetzen Kastenschatten Für Tiefe, Text Schatten für Leuchten und Umrisse Grenzradius Für Ecken einschließlich der elliptischen CSS-Filter Für Unschärfe-, Helligkeits- und Farbeffekte Glasmorphie Für mattierte Platten Neumorphismus Für weiche erhabene Oberflächen Gradienten für Hintergründe, und die CSS-Einheitskonverter Wenn Sie px in rem. Alle von ihnen client-seitig mit einer Live-Vorschau laufen Die beiden Regeln, die es wert sind, getragen zu werden: echte Schatten sind geschichtet, und
backdrop-filterEtwas dahinter braucht, um zu verschwimmen.
Welchen Generator brauche ich?
| du willst | Eigentum | Werkzeug |
|---|---|---|
| Eine Karte, die von der Seite abhebt | box-shadow |
Kastenschatten |
| Leuchtender, umrissener oder geprägter Text | text-shadow |
Text Schatten |
| Abgerundete oder pillenförmige Ecken | border-radius |
Grenzradius |
| Ein Element verwischen, dimmen, entsättigen oder tönen | filter |
CSS-Filter |
| Ein mattiertes Panel über einem Foto | backdrop-filter |
Glasmorphie |
| Ein weicher Knopf, der in die Oberfläche gedrückt aussieht | Geschichtet box-shadow |
Neumorphismus |
| Ein Farbübergangshintergrund | linear-gradient |
Gradient |
| 24 px in rem zu verwandeln | Keine | Einheitenkonverter |
Der Rest dieses Leitfadens ist, was jeder tut und wo er beißt.
Wie funktioniert Box-Shadow?
Die Kurzschrift besteht aus fünf Werten und einer Farbe:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └ colour */
/* │ │ │ └ spread: grow or shrink */
/* │ │ └ blur: 0 is a hard edge */
/* │ └ vertical offset */
/* └ horizontal offset */
Offsets bewegen den Schatten Unschärfe mildert seinen Rand, spreizt ihn nach außen um etwa die Hälfte des Unschärfewertes in jede Richtung, Spread wächst oder schrumpft den Schatten, bevor die Unschärfe aufgetragen wird, und eine negative Spreizung ist der Trick für einen Schatten, der unter einem Element versteckt sitzt, anstatt es zu halbieren.
Der Teil, den die Leute vermissen: Schattenstapel. Eine durch Kommas getrennte Liste gibt zurück nach vorne, erster Schatten oben:
box-shadow:
0 1px 2px rgb(0 0 0 / 0.20), /* contact: tight, darker */
0 8px 24px rgb(0 0 0 / 0.12); /* ambient: wide, lighter */
Dieses Paar ist der Grund, warum ein Designer' s Schatten besser aussieht als Ihrer Ein Schatten liest sich als Aufkleber Zwei lesen sich als Objekt mit Gewicht Die Box Shadow Generator Wir ermöglichen Ihnen, Ebenen hinzuzufügen und jede einzelne separat zu ziehen, was die einzige vernünftige Möglichkeit ist, sie abzustimmen.
inset Bewegt den Schatten innerhalb des Randkastens, wodurch Sie einen Eingang erhalten, der vertieft aussieht, oder die innere Hälfte einer neumorphen Oberfläche.
Eine Performance-Note, die mich bei echten Projekten gebissen hat: Animieren box-shadow Erzwingt ein Neulackieren jedes Frames Wenn Sie möchten, dass eine Karte beim Schwebeflug angehoben wird, animieren Sie transform und ein zweites Element überblenden, das den größeren Schatten hält Die MDN-Box-Shadow-Referenz Syntax vollständig dokumentiert.
Wozu eignet sich Text-Shadow neben Drop Shadows?
Gleiche Idee, ein Wert weniger. text-shadow Keine Ausbreitung hat:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
Seine interessanten Verwendungszwecke sind überhaupt keine Schatten.
Umrisse. Vier harte Schatten bei null Unschärfe, einer pro Diagonale, fälschen einen Strich um Text Es ist schwerer als -webkit-text-stroke Aber es funktioniert überall und rendert außerhalb der Glyphe, anstatt den Unterschied zu spalten:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
Glühen. Nullversatz, große Unschärfe, gesättigte Farbe, zwei- oder dreimal wiederholt, um die Intensität zu steigern.
Lesbarkeit über Bilder. Ein einzelner weicher dunkler Schatten unter weißem Text erkauft Ihnen Kontrast, wenn der Hintergrund ein Foto ist, das Sie nicht kontrollieren Es ist kein Ersatz für ein richtiges Scrim, und es wird kein fehlerhaftes Kontrastverhältnis speichern, aber es verhindert, dass die Unterlängen in einem hellen Fleck verschwinden.
Bauen Sie alle drei auf der Text-Schattengenerator. Wenn Sie eher einer Kontrastanforderung als einem Effekt nachjagen, überprüfen Sie das Ergebnis mit WCAG mit Farbkontrast-Checker Anstatt es zu beäugen.
Warum nimmt der Grenzradius acht Werte an?
Die meisten Menschen verwenden eine Vollform sind zwei Vierergruppen, getrennt durch einen Schrägstrich:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
Vor dem Schrägstrich: der horizontale Radius jeder Ecke, im Uhrzeigersinn von oben-links Danach: der vertikale Radius Geben Sie beides und jede Ecke wird zu einer Ellipse statt zu einem Viertelkreis So erhalten Sie organische Blobformen ohne SVG.
Zwei wissenswerte Verhaltensweisen.
Prozentsätze lösen sich gegen verschiedene Achsen auf. Ein horizontaler Radius in % Prozent des Elements ist' s Breite, die vertikale seiner Höhe Also border-radius: 50% Auf einem Rechteck ergibt sich eine Ellipse, kein abgerundetes Rechteck, was die Menschen beim ersten Mal überrascht.
Der Browser skaliert Radien nach unten, wenn sie sich überlappen. Wenn zwei benachbarte Radien mehr ergeben als die Seite, die sie teilen, werden alle Radien proportional reduziert, bis sie passen Man kann die Form nicht überlaufen, weshalb border-radius: 9999px Produziert zuverlässig eine Pille.
der Grenzradiusgenerator Legt alle acht Werte mit Schiebern pro Ecke offen und gibt die kürzeste gültige Kurzschrift ab, die es wert ist, verwendet zu werden, da das Schreiben des Schrägstrichformulars von Hand wirklich unangenehm ist.
Was können CSS-Filter und was kosten sie?
filter Grafische Operationen auf ein Element und alles darin anwendet:
filter: blur(4px) brightness(1.1) saturate(1.2);
Funktionen von links nach rechts zusammensetzen, und Ordnung ändert das Ergebnis Unschärfe dann Aufhellung ist nicht dasselbe wie Aufhellung dann Unschärfe.
| Funktion | Tut | Aufpassen auf |
|---|---|---|
blur() |
Gaußsche Unschärfe | Teuer bei großen Radien; verwischt Kanten nach außen |
brightness() |
Multiplikationen Leichtigkeit | Über 1 Clips hebt sich weiß |
contrast() |
Verschiebt Werte von Mittelgrau | Zerkleinert schnell Detail |
grayscale() |
Entfernt die Sättigung | Günstiger als ein doppelter Vermögenswert |
sepia() |
Warme Tonkarte | Kombinieren mit hue-rotate() Für andere Tönungen |
hue-rotate() |
Verschiebt den Farbton um einen Winkel | Bewahrt die wahrgenommene Leichtigkeit nicht |
drop-shadow() |
Schatten, der Alpha folgt | Anders box-shadow, folgt der eigentlichen Form |
Diese letzte Reihe ist es wert, in Erinnerung zu bleiben. box-shadow Schatten die Randbox, so dass ein transparenter PNG eines Logos einen rechteckigen Schatten erhält. filter: drop-shadow() Verfolgt den Alphakanal und beschattet das Logo selbst.
Die Kosten sind real Filter drücken ein Element auf seine eigene Compositing-Schicht, und blur() Insbesondere ist großflächig teuer Auf einen Knopf fein Überlegen Sie sich zweimal ein ganzseitiges Overlay auf einem Low-End-Telefon. MDN's Filterreferenz Listet jede Funktion und ihr Interpolationsverhalten auf.
Versuchen Sie es mit Kombinationen auf der CSS-Filtergenerator, die die Vorschau und die genaue Deklaration nebeneinander zeigt.
Wie baue ich eine Glasmorphieplatte, die funktioniert?
Frostglas ist eine Eigenschaft, die die Arbeit erledigt:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter Filter was ist Hinter Das Element statt das Element selbst Daraus folgen drei Dinge, und sie machen fast jedes & quot; aus. Warum sieht mein Glas aus wie eine graue Box" Frage.
Es braucht etwas dahinter. Über einer flachen Hintergrundfarbe ist ein unscharfer Hintergrund dieselbe flache Farbe. Der Effekt existiert nur über ein Foto, einen Farbverlauf oder überlappende Inhalte.
Der Hintergrund muss durchscheinend sein. Ein vollundurchsichtiger Hintergrund verbirgt den unscharfen Hintergrund komplett Irgendwo zwischen 10% und 25% Weiß ist der übliche Bereich.
Sättigung ist das, was es verkauft. Echtes Glas konzentriert Farbe. saturate(180%) Neben der Unschärfe liegt der Unterschied zwischen Milchglas und einem Wisch.
Fügen Sie den Haarrand hinzu, da Glas einen Rand hat, und überprüfen Sie den Kontrast vor dem Versand: Text über einem unscharfen Foto geht je nach Foto vorbei oder fällt aus, und ein Panel, das Ihr Heldenbild perfekt liest, kann beim nächsten nicht lesbar sein.
der Glasmorphismusgenerator Vorschauen über ein tatsächliches Bild, was hier wichtiger ist als bei jedem anderen Effekt in diesem Handbuch.
Lohnt sich der Einsatz von Neumorphismus?
Neumorphismus, oder weiche UI, lässt Elemente vom Hintergrund extrudiert aussehen, anstatt darüber zu schweben Zwei Schatten, gegenüberliegende Ecken, einer heller als die Oberfläche und einer dunkler:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
Tauschen Sie sie gegen einen gedrückten Zustand aus oder verwenden Sie sie inset Auf beiden für einen eingemeißelten Look.
Die Technik unterliegt einer harten Einschränkung: Das Element und sein Hintergrund müssen die gleiche Farbe haben. Der Effekt besteht ausschließlich aus den beiden Schatten, sodass eine neumorphe Taste auf einem anderen Hintergrund nicht mehr als extrudiert liest und als defekt zu lesen beginnt.
Es hat auch ein Problem mit der Zugänglichkeit, bei dem es sich lohnt, ehrlich zu sein. Die gesamte Ästhetik ist ein geringer Kontrast durch die Konstruktion, und ein Knopf, dessen einzige Erschwinglichkeit ein weicher Schatten ist, kann versagen WCAG's-Kontrastanforderung ohne Text Für interaktive Komponenten, wenn Sie es verwenden, geben Sie Knöpfen einen echten Rand oder einen Fokusstil, der nicht vom Schatten abhängt.
der Neumorphismusgenerator Leitet beide Schattenfarben von Ihrer Oberflächenfarbe ab, die der fummelige Teil ist, den Sie von Hand erledigen können.
Wann brauche ich einen Unit-Konverter?
Häufiger als man denken würde, denn Design-Tools sprechen px und gutes CSS oft nicht.
rem Relativ zur Stammschriftgröße ist, so dass ein Layout in rem skaliert, wenn ein Benutzer seinen Browser ändert's Standardtextgröße. em Relativ zu den ist Element's Schriftgröße, was es nützlich für die Auffüllung macht, die ihren eigenen Text verfolgen sollte, und tückisch, wenn sie durch verschachtelte Elemente zusammengesetzt wird.
Die Arithmetik ist trivial, vierzig Mal beim Übersetzen einer Spec zu machen, da schleichen sich Fehler ein, vor allem wenn die Wurzelgröße nicht 16 px ist Die CSS-Einheitskonverter nimmt eine konfigurierbare Wurzel und zeigt jede Einheit auf einmal an.
Für Steigungen ist die Gradientengenerator Bedeckt linear, radial und konisch, und es gibt eine längere Schreibweise im CSS-Gradientenführerdrohen
Zusammenfügen: eine Karte, von vorne bis hinten anfangen
Die Grundstücke werden selten alleine genutzt Hier ist eine Karte, die vier davon verwendet, so gebaut, wie ich sie bauen würde.
Beginnen Sie mit der Form und dem ruhenden Schatten:
.card {
border-radius: 12px;
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
transition: transform 150ms ease, box-shadow 150ms ease;
}
Wieder zwei Schatten, beide Licht Eine Ruhekarte sollte kaum angehoben werden Speichern Sie das Drama für den Schwebezustand.
.card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
}
der translateY Macht die meiste wahrgenommene Arbeit Bewegung liest sich überzeugender als Auftrieb als ein größerer Schatten, und sie ist billig, weil Transformationen zusammengesetzt und nicht neu bemalt werden.
Wenn die Karte auf einem Foto statt auf einer flachen Seite sitzt, tauschen Sie den weißen Hintergrund gegen Glas:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
Merke was sich verändert hat und was nicht Der Radius und die Schatten tragen sich unberührt über Nur die Oberflächenbehandlung unterscheidet sich, das ist das nützliche Denkmodell: Form und Tiefe sind eine Entscheidung, Oberfläche eine andere.
Wie sieht es mit Browser-Support und Fallbacks aus?
Das meiste davon ist alt und sicher. box-shadow, text-shadow, border-radius und filter Seit Jahren überall unterstützt werden, und man kann sie ohne einen zweiten Gedanken schreiben.
backdrop-filter Ausnahme handhabungswürdig ist Unterstützung ist jetzt breit, aber es ist die eine Eigenschaft hier, die ein wirklich gebrochen aussehendes Ergebnis erzeugt, wenn es fehlt: Eine Tafel mit 15% weißem Hintergrund und ohne Unschärfe ist ein blasser Abstrich über einem Foto Hüte es:
.glass {
background: rgb(255 255 255 / 0.85); /* readable fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
}
}
Der Fallback ist ein meist undurchsichtiges Panel, was nicht der Effekt ist, aber perfekt nutzbar ist Die erweiterte Version gilt nur dort, wo der Browser sie liefern kann. MDN's @supports Bemerkung Deckt die Syntax ab und es lohnt sich, jederzeit zu greifen, wenn eine Eigenschaft einen visuell fehlerhaften Fehlermodus aufweist und nicht nur einen einfacheren.
Wie halte ich Effekte über ein Projekt hinweg konsistent?
Der Fehlermodus auf einer echten Codebasis ist nicht ein schlechter Schatten Es sind vierzehn leicht unterschiedliche Schatten, denn jeder, der eine Karte brauchte, schrieb seine eigene.
Definieren Sie sie einmal als benutzerdefinierte Eigenschaften und verwenden Sie die Namen:
:root {
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
--radius: 12px;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }
Drei Schattenschritte reichen meist aus, wenn man sich dabei ertappt, eine vierte hinzuzufügen, liegt das oft daran, dass eine Komponente eine andere braucht Höhe Anstatt eines anderen Schattens, und die Antwort ist, einen bestehenden Schritt wiederzuverwenden.
Dadurch wird auch der Dark Mode handhabbar Schatten, die auf Weiß arbeiten, sind auf einer dunklen Oberfläche, wo Tiefe meist von einem helleren Rand oder einem subtilen Leuchten kommt, nahezu unsichtbar Definieren Sie die Token innerhalb einer Medienabfrage neu und jede Komponente folgt:
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}
}
Erzeugen Sie jeden Wert einmal mit den oben genannten Tools, fügen Sie ihn in den Token-Block ein und hören Sie auf, darüber nachzudenken. Das ist der springende Punkt, wenn Sie einen Generator haben: Nicht um CSS zu schreiben, könnten Sie nicht von Hand schreiben, sondern um die Aufmerksamkeit nicht mehr auf Werte zu richten, die nur einmal entschieden werden müssen.
Wo diese Effekte Probleme bei der Zugänglichkeit verursachen
Jede Eigenschaft in diesem Leitfaden manipuliert den Kontrast, und der Kontrast ist die Sache, um die es bei den Barrierefreiheitsanforderungen hauptsächlich geht Vier spezifische Fallen.
Interaktive Komponenten brauchen sichtbare Grenzen. WCAG 2.2 erfordert einen Kontrast von 3:1 Für die Teile eines Bedienelements, die es identifizieren Eine Taste, deren einziger Rand ein weicher Schatten ist, kann das nicht bestehen, was das strukturelle Problem des Neumorphismus ist und der Grund dafür, dass ein Rand oder ein fester Fokusring dort nicht optional ist.
Glasscheiben erben ihren Hintergrund. & #39;s Kontrastproblem. Text auf einem mattierten Panel ist je nach Foto dahinter lesbar oder nicht, und das Foto ändert sich oft. Testen Sie gegen Ihr schlechtestes Bild, nicht gegen Ihren Helden. Das Anheben des Panels's Hintergrundtrübung ist normalerweise eine bessere Lösung, als den Text fett zu machen.
Filter ändern lautlos den Kontrast. brightness() und contrast() Auf einen Container aufgetragen, gilt auch für den darin enthaltenen Text A filter: brightness(1.15) Auf einer Karte zum Knallen kann leise Ihr Körpertext unter die Schwelle von 4,5:1. Prüfen Sie anschließend mit der Farbkontrast-Checker, nicht vorher.
Lassen Sie nicht zu, dass ein Schatten der einzige Zustandsindikator ist. Wenn sich Hover, Fokus und Pressung nur durch die Schattentiefe unterscheiden, verlieren Tastaturbenutzer und alle mit Sehschwäche die Unterscheidung. Kombinieren Sie die Schattenänderung mit einer Transformation, einem Umriss oder einer Farbverschiebung.
All das macht die Effekte nicht unbrauchbar Es macht sie eher zu verifizieren als anzunehmen, was bei geöffneter Kontrastprüfung etwa eine Minute pro Komponente dauert.
Senden diese Tools meine Arbeit irgendwohin?
Nein. Jeder Generator läuft hier komplett im Browser, es gibt keinen Upload-Schritt und keine Server-Roundtrip, weshalb sie sofort reagieren, wenn Sie einen Slider ziehen Das ist der gleiche Grund, warum der Rest des Katalogs offline funktioniert, abgedeckt im Datenschutz-Leitfadendrohen
Häufige Fehler
- Ein Schatten statt zwei. Der sichtbarste Unterschied zwischen einem handgeschriebenen und einem entworfenen Schatten.
- Animierend
box-shadowschweben. Malt jeden Rahmen neu AnimatetransformUnd stattdessen überblenden. backdrop-filterÜber einer einfarbigen Farbe. Nichts zu verschwimmen, also passiert nichts.- Undurchsichtiger Hintergrund auf einer Glasscheibe. Versteckt den Effekt, den du gerade geschrieben hast.
- Neumorphismus auf einem nicht übereinstimmenden Hintergrund. Die Illusion hängt davon ab, dass sie identisch sind.
border-radius: 50%Ein abgerundetes Rechteck erwarten. Auf einem nichtquadratischen Element erhält man eine Ellipse.- Versand eines dieser Produkte ohne Kontrastprüfung. Schatten und Glas reduzieren beide den Kontrast und beide lassen sich auf einem guten Monitor leicht überstimmen.
