Text Shadow Generator
CSS text shadow
CSS text shadow Läuft lokal in Ihrem Browser
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
Der Textschattengenerator legt den Versatz, die Unschärfe, die Farbe und die Deckkraft eines Schattens hinter dem Text fest, mit einer Live-Vorschau und dem CSS. Im Gegensatz zu box-shadow hat es keinen Spread-Wert, was die Leute auffällt: Die einzige Möglichkeit, einen Textschatten schwerer zu machen, besteht darin, mehrere Schatten in einer Deklaration zu stapeln. Es ist für die Lesbarkeit am nützlichsten, indem es einen subtilen dunklen Schatten hinter hellen Text auf einem Foto legt, und es sollte niemals das Ding sein, das den Text lesbar macht, da es verschwindet, sobald sich der Hintergrund ändert.
Where people use the
- Hinzufügen eines subtilen Schattens, sodass eine Bildunterschrift über einem Foto zu lesen ist.
- Erzeugen eines gepressten oder gravierten Überschrifteneffekts.
- Erstellen einer Retro- oder Neon-Textbehandlung.
- Testen Sie, wie schwer ein Schatten sein muss, bevor er billig aussieht.
How to use the
- 1
Legen Sie die Offsets fest
Offset X bewegt sich nach rechts, Offset Y bewegt sich nach unten. Ein Versatz von ein oder zwei Pixeln wird als Tiefe angezeigt; Alles, was größer ist, beginnt wie ein Schlagschatten auszusehen.
- 2
Stellen Sie die Unschärfe ein
Unschärfe macht die Kante weicher. Zero erzeugt ein hartes Duplikat des Textes, wodurch Umrisse und Retro-Effekte erzeugt werden.
- 3
Wählen Sie Farbe und Deckkraft
Dunkler Text auf hellem Hintergrund benötigt einen hellen Schatten und umgekehrt. Halten Sie die Deckkraft niedrig, es sei denn, Sie möchten einen offensichtlichen Effekt erzielen.
- 4
Kopieren Sie das CSS
Die Regel enthält die RGBA-Farbe, fertig zum Einfügen.
- 5
Stapeln Sie Schatten, wenn Sie mehr Gewicht benötigen
Fügen Sie in Ihrem Stylesheet einen zweiten Schatten hinzu, der durch ein Komma getrennt ist. Nur so kann ein Textschatten dicker werden, da es zu keiner Ausbreitung kommt.
Tipps und Best Practices
- Weniger ist mehr: Ein oder zwei Pixel bei geringer Deckkraft sind besser als eine starke Unschärfe.
- Verlassen Sie sich bei der Zugänglichkeit nie allein auf einen Schatten; Korrigieren Sie den Kontrast darunter.
- Denken Sie daran, dass die Eigenschaft vererbt wird, also beschränken Sie sie auf das Element, das Sie meinen.
Häufig gestellte Fragen
Warum gibt es keinen Spread-Wert?
Weil text-shadow einen nicht unterstützt. Seine Syntax ist nur Offset X, Offset Y, Unschärfe und Farbe. Um die Ausbreitung zu simulieren, stapeln Sie mehrere identische Schatten mit leicht unterschiedlichen Versätzen.
Kann ich damit Text über einem Bild lesbar machen?
Nur als Ergänzung. Ein Schatten hilft an den Rändern, versagt jedoch in belebten Bereichen und zählt nicht zum WCAG-Kontrastverhältnis, das an der Hintergrundfarbe gemessen wird. Fügen Sie ein Gitter oder eine feste Platte hinzu, wenn die Lesbarkeit wirklich wichtig ist.
Wie gliedere ich Text?
Stapeln Sie vier Schatten mit plus und minus einem Pixel in jede Richtung ohne Unschärfe. Dadurch entsteht ein Umrisseffekt, ohne dass -webkit-text-Stroke erforderlich ist, was nicht überall unterstützt wird.
Verlangsamt es die Seite?
Ein einzelner statischer Schatten kostet fast nichts. Beim Animieren eines Textschattens oder beim Anwenden eines großen, unscharfen Schattens auf viel Text entstehen Kosten für die Neulackierung.
Wird es von untergeordneten Elementen geerbt?
Ja. Der Textschatten wird vererbt. Wenn Sie ihn also auf einen Container setzen, wird er auf alle Nachkommen mit Text angewendet, was gelegentlich überraschend ist.