Die meisten CSS-Texteffekte, die kompliziert aussehen, werden aus einer Eigenschaft hergestellt Die Leuchtreklame auf einer Landingpage, der harte Umriss auf einem Spieltitel, der gestapelte orange Schriftzug, der wie eine Plattenhülle aus den 1970 er Jahren aussieht: Jeder davon ist ein einziger text-shadow Deklaration mit mehreren kommagetrennten Schichten Die Syntax ist kurz Der harte Teil ist das Abgreifen von Offsets und Unschärfewerten, die sich gut lesen, und das Merken, welche Ebene darauf lackiert.
Dieser Leitfaden behandelt die text-shadow Grammatik, wie Layering funktioniert, die Rezepte hinter den gemeinsamen Effekten mit den genauen Werten, die sie verwenden, und die Fehler, die dazu führen, dass schattierter Text schwer zu lesen oder langsam wiedergegeben wird Jedes Beispiel kann in der CSS-Textschattengenerator, die das Ergebnis live zeigt und die Erklärung für Sie schreibt.
tl; dr:
text-shadownimmt eine durch Kommas getrennte Liste von Schatten, die jeweils als geschrieben werdenoffset-x offset-y blur-radius color. Der erste Schatten in der Liste malt oben drauf Es hat keinen Spreizwert und keineinsetStichwort, im Gegensatzbox-shadow. Glühen sind mehrere Null-Offset-Schatten mit wachsender Unschärfe, Umrisse sind vier Ein-Pixel-Hartschatten, und 3 D-Text ist ein Stapel harter Schatten, die jeweils ein Pixel weiter draußen liegen Die Toolz Textschattengenerator Erstellen Sie diese mit Schiebereglern und acht Voreinstellungen, clientseitig, kostenlos, ohne Anmeldung.
Was ist die CSS-Textschatten-Eigenschaft?
der text-shadow Eigenschaft hinter den Glyphen eines Elements einen oder mehrere Schatten malt' s Text. Es ist im W3 C definiert CSS-Textdekorationsmodul Level 3, und sein Wert ist entweder none oder eine durch Kommas getrennte Liste von Schatten.
Jeder Schatten hat bis zu vier Teile:
| Teil | Erforderlich | Was es tut | Zulässige Werte |
|---|---|---|---|
| Horizontalversatz | ja | Bewegt den Schatten nach rechts (positiv) oder links (negativ) | Jede Länge, z. 2px, -0.1em |
| Vertikaler Versatz | ja | Bewegt den Schatten nach unten (positiv) oder nach oben (negativ) | Beliebige Länge |
| Unschärferadius | Nein, standardmäßig 0 |
Weicht den Rand auf; größer bedeutet verschwommener | Null oder eine positive Länge Negativ ist ungültig |
| Farbe | Nein, standardmäßig currentColor |
Schattenfarbe, einschließlich Transparenz | Jede CSS-Farbe |
Die Farbe kann an erster Stelle oder an letzter Stelle stehen. text-shadow: #000 1px 1px und text-shadow: 1px 1px #000 Sind der gleiche Schatten lässt man die Farbe weg, nimmt der Schatten die text' eigene Farbe, was man sich selten für einen Drop Shadow wünscht, aber praktisch für ein schnelles Leuchten in der Textfarbe.
Ein Schatten ändert nie Layout Es drückt nicht benachbarte Elemente weg oder das Element wachsen's Box, so dass eine große Unschärfe über den Tellerrand hinauslaufen und von einem Elternteil abgeschnitten werden kann overflow: hiddendrohen
Wie unterscheidet sich Text-Shadow von Box-Shadow?
text-shadow Der Form jedes Buchstabens folgt, während box-shadow Folgt dem Rechteck des Elements' s Randfeld Das ist der praktische Unterschied, und es entscheidet, nach welchem man greift Die Grammatik unterscheidet sich ebenso.
| Feature | text-shadow |
box-shadow |
|---|---|---|
| Form des Schattens | Jede Glyphenumrisslinie | Das Element's-Kasten, einschließlich abgerundeter Ecken |
| Spreizradius | Nicht verfügbar | Ja, vierte Länge |
inset Stichwort |
Nicht verfügbar | ja |
| Mehrere Schichten | Ja, kommagetrennt | Ja, kommagetrennt |
| Lackierauftrag | Erst oben aufgeführt | Erst oben aufgeführt |
| Standardfarbe | currentColor |
currentColor |
| Typische Verwendung | Überschriften, Logos, Lesbarkeit über Bilder | Karten, Knöpfe, Elevation |
Der fehlende Spreizwert ist der Grund, warum Textumrisse vier Schatten statt einem benötigen Mit box-shadow Du kannst schreiben 0 0 0 2px black Fester Ring wachsen zu lassen Bei Text gibt es keine Möglichkeit die Glyphe zu erweitern, also fälscht man sie durch Versetzen von Kopien in mehrere Richtungen, wenn man den Behälter statt der Wörter stylt, wird die Box Schatten Generator Guide Decken Spreiz, Einschub - und Aufrissschichten.
Wie funktioniert das Layern mehrerer Textschatten?
Eine einzelne Deklaration kann beliebig viele Schatten aufnehmen, getrennt durch Kommas, und der Browser malt den ersten, der dem Betrachter am nächsten steht, hinten sitzt der letzte Schatten in der Liste Der Text selbst malt immer über allen.
Dass die Reihenfolge immer dann wichtig ist, wenn sich Ebenen überschneiden Vergleichen Sie diese beiden Erklärungen:
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
Im ersten bleibt die knackige schwarze Kopie scharf und dahinter sitzt der gelbe Dunst, im zweiten wäscht der gelbe Schein über die schwarze Kopie und macht sie weichGleiche Schatten, andere Optik.
Der Generator folgt der gleichen Regel Schicht 1 in den Ebenen-Tabs ist der erste Schatten in der Ausgabe, also malt er oben drauf, durch Hinzufügen einer Ebene wird diese an das Ende der Liste angehängt, hinter die anderen Um eine Ebene nach vorne zu verschieben löscht man sie und erstellt sie neu, oder bearbeitet das kopierte CSS von Hand.
Welche Werte schreibt der Toolz-Generator?
der Text-Schattengenerator Gibt jeder Ebene fünf Steuerelemente und schreibt eine Deklaration in einem festen Format, das Wissen, dass Format hilft, wenn man das Ergebnis in eine Codebasis mit eigenen Konventionen einfügt.
| Steuerung | Reichweite | Schritt | Geschrieben als |
|---|---|---|---|
| Offset X | -50 px bis 50 px | 1 x | Npx |
| Versatz Y | -50 px bis 50 px | 1 x | Npx |
| Unschärfe | 0 x bis 100 x | 1 x | Npx(einschließlich 0px |
| Farbe | Farbwähler | - | 6-stelliges Hexfeld |
| Opazität | 0% bis 100% | 1% | Als zwei Hex-Ziffern nach der Farbe hinzugefügt |
Die Deckkraft wird als 8-stelliger Hex-Wert in die Farbe gefaltet, nach dem CSS-Farbmodul Stufe 4 Hex-Notation. Die letzten beiden Ziffern sind der Alphakanal auf einer Skala von 0 bis 255, also multipliziert das Werkzeug die Deckkraft mit 255, rundet und wandelt in Hex um.
So klappt das für ein paar Trübungen:
| Deckkraftschieber | Mal 255 | Abgerundet | Hex-alpha | Beispielfarbe |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229,5 | 230 | e6 |
#4466eee6 |
| 70% | 178,5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89,25 | 89 | 59 |
#00000059 |
| 25% | 63,75 | 64 | 40 |
#00000040 |
Jeder aktuelle Browser liest 8-stelliges Hex Wenn Sie einen sehr alten Browser unterstützen müssen, schreiben Sie die Farbe um als rgba() Nach dem Kopieren: #00000099 wird rgba(0, 0, 0, 0.6)drohen
Das Tool akzeptiert nur Slider - und Picker-Eingaben, Werte sind also ganze Pixel Für einen Schatten gemessen in emDie mit der Schriftgröße skaliert, kopieren Sie das CSS und tauschen Sie die Einheiten in Ihrem Stylesheet aus. A 2px Offset auf 16 px Körpertext ist 0.125emdrohen
Wie erzeugt man einen Neon-Glow-Texteffekt?
Ein Neonleuchten ist mehrere Schatten mit Nullversatz, gleicher heller Farbe und zunehmender Unschärfe, jede Schicht fügt einen breiteren, schwächeren Halo hinzu, und zusammen sehen sie aus wie Licht, das in die Umgebungsluft blutet.
Der Generator öffnet sich auf seiner Neon Glow-Voreinstellung, die Folgendes erzeugt:
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Drei Schichten, jedes Mal eine Unschärfeverdopplung (7, 14, 28), Opazität von 100% auf 90% bis 70% runtertreten Die enge 7 px-Schicht gibt den Buchstaben einen hellen Kern, und die 28 px-Schicht verteilt die Farbe auf dunklem Hintergrund mit weißem Text liest sich das als beleuchtete Röhre Auf hellem Hintergrund verschwindet der Effekt größtenteils, weshalb die Vorschau einen Light bg / Dark bg-Toggle hat: Überprüfen Sie beides, bevor Sie einen Glow mit einem Theme-Switch an eine Seite versenden.
Um das Leuchten stärker zu machen, fügen Sie eine vierte Schicht bei 56 px Unschärfe hinzu oder wiederholen Sie die 7 px-Schicht zweimal. Wenn Sie eine Schicht wiederholen, stapelt sie ihre Opazität und macht den Kern intensiver, ohne ihn zu verbreitern.
Wie umreißt man Text mit Text-Shadow?
Platzieren Sie vier harte Schatten (unscharf 0) ein Pixel nach außen auf jeder Diagonale Ihre Überlappung zeichnet den Rand jeder Glyphe nach.
Die Outline-Voreinstellung schreibt:
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
Das funktioniert gut bei einem Pixel Bei zwei oder drei Pixeln beginnen sich Lücken an den Mittelpunkten von Kurven und geraden Kanten zu zeigen, denn die vier Kopien decken nur die Diagonalen ab Für einen dickeren Umriss fügen Sie vier weitere Schichten auf den geraden Achsen hinzu (0 -2px, 2px 0, 0 2px, -2px 0) also acht Exemplare umschließen jeden Buchstaben.
Es gibt eine Nicht-Schatten-Alternative. -webkit-text-stroke Zeichnet einen echten Strich entlang des Glyphenpfads und wird trotz seines Präfixes von aktuellen Browsern unterstützt, zentriert ist er auf die Gliederung, frisst sich also in dünne Buchstaben, und er wird im WHATWG Compatibility Standard angegeben, statt in einem CSS-Modul Für kleine, knackige Umrisse auf Display-Text bleibt der Vier-Schatten-Trick die vorhersehbarste Option.
Wie macht man 3 D oder extrudierten Text?
Stapeln Sie mehrere harte Schatten in der gleichen Farbe, jedes versetzt ein Pixel weiter nach unten und rechts Jede Kopie fügt ein Pixel Tiefe hinzu, und das Auge liest den Stapel als Seite eines festen Buchstabens.
Die Retro 3 D Voreinstellung:
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Drei orange Schichten bauen eine Drei-Pixel-Extrusion auf, und eine vierte schwarze Schicht mit 25% Deckkraft sitzt ein Pixel weiter draußen als Kontaktschatten, der die Buchstaben erdet Für eine tiefere Extrusion fügen Sie weiterhin orange Schichten mit den Offsets 4, 5, 6 hinzu und bewegen die dunkle Schicht bis zum Ende Zwölf Schichten für eine 12-px-Extrusion sind normal für eine große Heldenüberschrift.
Die Long Shadow-Voreinstellung verwendet die gleiche Idee mit Lücken und verblassender Deckkraft:
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
Die Versätze wachsen (1, 3, 6, 10), während die Opazität abnimmt (20%, 15%, 10%, 6%), sodass der Schatten diagonal abfällt, anstatt einen festen Block zu bilden.
Welches Text-Schatten-Rezept passt zu welchem Effekt?
Hier sind alle acht Voreinstellungen im Generator, mit der Idee dahinter, damit Sie sie anpassen können.
| Voreingestellt | Schichten | Versätze | Unschärfe | Idee |
|---|---|---|---|---|
| Weich | 1 | 0, 2 x | 4px | Subtiler Tropfenschatten bei 35% Schwarz, sicher für die meisten Überschriften |
| Hart | 1 | 2 x, 2 x | 0 | Knackige Offsetkopie in 60% Schwarz, ein Flachdruck-Look |
| Neonglühen | 3 | 0, 0 | 7, 14, 28 x | Gleiche Farbe, wachsende Unschärfe, für Licht auf Dunkel |
| Retro 3D | 4 | 1 bis 4 x Diagonale | 0 | Stufenweise gedruckte Exemplare plus schwacher Kontaktschatten |
| Umriss | 4 | +/-1 x Diagonalen | 0 | Vier Kopien zeichnen den Glyphenrand nach |
| Prägen | 2 | -1 px/-1 px und 1 px/1 px | 0 | Weißes Highlight oben links, dunkler Farbton unten rechts |
| Feuer | 3 | 0, -1 / -2 / -4px | 4, 10, 18 x | Gelb über Orange bis Rot, nach oben steigend |
| Langer Schatten | 4 | 1, 3, 6, 10 px Diagonale | 0 | Wachsende Kluft, verblassende Deckkraft |
Prägung ist die eine Person, die falsch gelesen wird Sie paart einen hellen Schatten nach oben und nach links mit einem dunklen Schatten nach unten und nach rechts, der Licht von oben-links schlägt erhabene Buchstaben tauschen Sie die beiden Farben und der Text sieht stattdessen in die Seite gedrückt, der klassische Buchdruck-Effekt Beide funktionieren nur, wenn die Textfarbe nahe an der Hintergrundfarbe ist; auf kontrastreichem Text verschwinden die Highlights.
Feuer ist die einzige Voreinstellung mit negativen vertikalen Versätzen Jede Schicht bewegt sich weiter nach oben und wird unschärfer und röter, sodass die Hitze von den Buchstaben abzusteigen scheint.
Schadet Textschatten der Lesbarkeit oder Zugänglichkeit?
Es kann, und das Risiko wächst mit Unschärfe und Versatz Ein Schatten verändert nicht das Kontrastverhältnis, das die WCAG misst, das zwischen der Textfarbe und der Hintergrundfarbe berechnet wird Die WCAG 2.1 Kontrastminimum Fordert 4,5:1 für normalen Text und 3:1 für großen Text, und ein Leuchten hilft Ihnen nicht, das auf dem Papier zu erfüllen.
In der Praxis erleichtert ein dünner dunkler Schatten hinter hellem Text auf einem vielbefahrenen Foto das Herauspicken der Buchstaben, denn er trennt die Glyphenkanten vom Bild Ein starkes Leuchten auf kleinem Text bewirkt das Gegenteil: Der Heiligenschein füllt die Zähler von Buchstaben wie "e" und "a" und das Wort wird zu Brei.
Einige Richtlinien, die Bestand haben:
- Halten Sie Textschatten dezent. So etwas wie
0 1px 2px rgba(0, 0, 0, 0.3)Überfluss ist. - Speichern Sie mehrschichtige Effekte für großen Anzeigetext, etwa 32 Prozent und mehr.
- Überprüfen Sie die Wirkung sowohl auf hellen als auch auf dunklen Hintergründen, wenn Ihre Website über einen Theme-Toggle verfügt.
- Verlassen Sie sich nicht auf den Schatten, um einen geringen Kontrast zu retten. Reparieren Sie zuerst die Textfarbe.
- Testen Sie bei der kleinsten Größe, die der Kurs auf einem Telefon erreicht, wo der Schatten proportional am größten ist.
Was verlangsamt den Textschatten und was sind häufige Fehler?
Unschärfe ist der teure Teil Jede unscharfe Schicht muss bei jedem Neuanstrich gerastert und unscharf gemacht werden, und die Kosten skalieren mit Unschärferadius und der Textmenge Die MDN-Referenz für Text-Shadow Deckt die Syntax ab. Die Performance-Seite lässt sich leicht begründen: Ein dreischichtiges Leuchten auf einer einzelnen Überschrift ist billig, und das gleiche Leuchten auf jedem Absatz eines langen Artikels, das während des Scrollens neu lackiert wird, ist eine häufige Quelle für Scherz auf Telefonen mit geringer Leistung.
Fehler, die sich immer wieder zeigen:
| Fehler | Symptom | Fix |
|---|---|---|
Einen Spread-Wert schreiben wie 0 0 4px 2px red |
Die ganze Erklärung wird ignoriert | Entfernen Sie die vierte Länge; Text-Shadow hat keine Streuung |
Hinzufügen inset |
Erklärung ignoriert | Wird im Text nicht unterstützt; Verwenden Sie stattdessen eine leichtere Prägung |
Negative Unschärfe, z. -2px |
Erklärung ignoriert | Unschärfe muss Null oder positiv sein |
| Fehlende Kommas zwischen den Schichten | Erklärung ignoriert, nichts gibt | Trennen Sie jeden Schatten mit einem Komma |
| Glühen an den Rändern abgeschnitten | Halo schneidet in einer geraden Linie | Elternteil hat overflow: hidden; Polsterung hinzufügen |
| Leuchten unsichtbar | Es scheint nichts zu passieren | Helles Leuchten auf hellem Hintergrund; Test bei Dunkelheit |
Anbieterpräfix -webkit-text-shadow |
Harmlos, aber nutzlos | Einfach verwenden text-shadow; es braucht kein Präfix |
Die ersten drei sind hervorzuheben Ein einzelner ungültiger Teil macht die ganze Deklaration ungültig, nicht nur diese Ebene, so dass ein Tippfehler in Schicht vier eines zwölfschichtigen 3 D-Effekts alle zwölf entfernt Die Ausgabe von generator' s ist immer gültig, was ein Grund ist, den Stapel dort aufzubauen und einzufügen.
Wann sollte man einen Generator verwenden, anstatt Text-Shadow von Hand zu schreiben?
Ein einzelner weicher Schatten lässt sich schneller tippen als klicken Alles mit drei oder mehr Ebenen lässt sich optisch schneller aufbauen, da man einen Blick beurteilt und ein Blick anhand von Zahlen schwer zu beurteilen ist. Der Generator ist auch zum Lernen nützlich: Wählen Sie eine Voreinstellung aus, ändern Sie eine Ebene und beobachten Sie, welcher Teil des Effekts sich bewegt.
Der Toolz-Generator läuft komplett im Browser Die Vorschau, die Ebenenliste und das CSS werden alle auf der Seite berechnet, es wird nichts hochgeladen, und es funktioniert offline weiter, sobald es geladen ist Es ist kostenlos, keine Anmeldung Kopieren CSS wird auf ein tägliches Nutzungsgeld angerechnet, wie andere Tools auf der Seite; bearbeiten und Vorschauen sind nicht.
Was es nicht tut: Es hat keine em oder rem Einheiten, keine eingegebenen Zahlenfelder, kein Drag-to-Reorder für Ebenen, und keine benutzerdefinierte Schriftart in der Vorschau Für diejenigen, kopieren Sie die Deklaration und passen Sie sie in Ihrem eigenen Stylesheet oder Browser-Dev-Tools an.
Wenn der gewünschte Effekt eher ein unscharfes oder neu eingefärbtes Element als ein Schatten ist CSS-filter Wie zum Beispiel drop-shadow() und blur() Ganzer Elemente, einschließlich Bilder, gelten Frosted Panels hinter Text sind eine Aufgabe für die GlasmorphiengeneratorUnd weiche extrudierte Knöpfe gehören dazu Neumorphismusgenerator. Der vollständige Satz visueller CSS-Builder ist auf dem Hub für CSS-Toolsund das CSS-Gradientengeneratorführung Passt gut zu Texteffekten, wenn man einen Farbverlauf hinter einem leuchtenden Titel haben möchte.
Ein funktioniertes Beispiel: ein lesbarer Heldentitel über einem Foto
Angenommen, Sie haben weißen 64-px-Text über einem hellen Strandfoto und die Buchstaben verschwinden immer wieder im Sand Das Ziel ist zuerst Lesbarkeit, zweitens Stil.
Beginnen Sie in der Text-schatten-werkzeug Mit der Soft-Voreinstellung: 0px 2px 4px #00000059. Auf einem zu schwachen Besetzungsbild Erhöhung der Deckkraft auf 60% und Unschärfe auf 8 px, was ergibt 0px 2px 8px #00000099. Die Kanten trennen sich vom Hintergrund, aber dünne Striche flackern noch.
Fügen Sie eine zweite Ebene mit Nullversatz, 2 x Unschärfe und 50% Schwarz hinzu: 0px 0px 2px #00000080. Weil du es als zweites hinzugefügt hast, malt es hinter der ersten Schicht, aber es schmiegt sich an den Glyphenrand und gibt jedem Strich einen dünnen dunklen Rand Das Ergebnis:
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Zwei Schichten, beide günstig zu rendern, und der Titel hält sich auf Sand, Himmel und Surfen fest Auf einem Telefon, wo die Überschrift auf 36 px fällt, sind die gleichen Pixelwerte proportional schwerer; konvertieren zu em Hält sie im Gleichschritt (0 0.03em 0.125em Bei 64 px).
