CSS-Textschatten mit einem Generator erstellen

Der Generator verbindet zwei Versätze, eine Unschärfe und eine Farbe zu einer CSS-text-shadow-Deklaration. Nicht ausgefüllte Felder erhalten die jeweils geprüften Standardwerte.

Wofür die Eingaben stehen

Ein CSS-Textschatten besteht aus einem horizontalen Versatz, einem vertikalen Versatz, einem Unschärfewert und einer Farbe. Der Generator setzt diese vier Angaben zu einer CSS-text-shadow-Deklaration zusammen. Damit eignet er sich, wenn Sie die Schreibweise der Eigenschaft nicht von Hand zusammensetzen möchten oder mehrere Varianten eines Schattens vorbereiten wollen.

Für die drei numerischen Angaben können Sie eigene Werte eintragen. Der horizontale Versatz beschreibt dabei die erste Zahlenposition, der vertikale Versatz die zweite und die Unschärfe die dritte. Die Farbe wird als Texteingabe behandelt. In der erzeugten Deklaration erscheinen die drei Zahlen mit der Einheit px, während die Farbangabe als eigener Bestandteil folgt.

Sie können einzelne Felder leer lassen, wenn Ihnen der jeweilige Standardwert genügt. Für einen leeren horizontalen Versatz wird 1 eingesetzt, für den vertikalen Versatz ebenfalls 1, für die Unschärfe 2 und für die Farbe #00000033. So lässt sich die Ausgabe entweder mit wenigen Eingaben oder mit vollständig festgelegten Werten erzeugen.

Eingaben festlegen und Ausgabe prüfen

1. Öffnen Sie den CSS-Textschatten-Generator und machen Sie sich mit den vier Eingabefeldern für horizontalen Versatz, vertikalen Versatz, Unschärfe und Farbe vertraut.

2. Tragen Sie beim horizontalen Versatz eine Zahl ein, wenn Sie den ersten Wert selbst bestimmen möchten. Dieses Feld darf leer bleiben; dann wird für diese Position der Standardwert 1 verwendet.

3. Geben Sie beim vertikalen Versatz eine Zahl an oder lassen Sie das Feld unausgefüllt. Ohne eigene Eingabe steht an dieser Stelle ebenfalls 1.

4. Legen Sie die Unschärfe mit einer Zahl fest. Wenn Sie keine Zahl eintragen, verwendet die Ausgabe dafür 2.

5. Schreiben Sie die gewünschte Farbe in das Farbfeld. Die Farbe ist eine Texteingabe und kann beispielsweise als Hex-Angabe formuliert werden. Bei einem leeren Farbfeld wird #00000033 eingesetzt.

6. Prüfen Sie die erzeugte Deklaration auf die Reihenfolge der Bestandteile. Nach text-shadow: folgen horizontaler Versatz, vertikaler Versatz, Unschärfe und Farbe; die Deklaration schließt mit einem Semikolon.

7. Wenn kein Versatz und keine Unschärfe gewünscht sind, tragen Sie für beide Versätze sowie für die Unschärfe 0 ein. Diese Nullwerte werden bei einer erfolgreichen Berechnung akzeptiert, während ein leeres Feld weiterhin den jeweiligen Standardwert auslöst.

8. Vergleichen Sie die Ausgabe mit Ihren Eingaben, bevor Sie sie in Ihre CSS-Datei übernehmen. Achten Sie besonders darauf, ob ein Feld absichtlich leer geblieben ist oder versehentlich keinen eigenen Wert enthält. Bei einer vollständig ausgefüllten Eingabe können Sie die vier Bestandteile unmittelbar anhand ihrer Reihenfolge kontrollieren.

Die fertige Deklaration richtig einordnen

Das Ergebnis ist eine CSS-text-shadow-Deklaration mit vier inhaltlichen Teilen. Die ersten drei Teile sind der horizontale Versatz, der vertikale Versatz und die Unschärfe; anschließend steht die Farbe. Für jeden numerischen Teil wird in der Ausgabe px ergänzt, und am Ende steht ein Semikolon.

Ein leerer Wert und die Zahl 0 haben dabei unterschiedliche Bedeutungen. Ein leeres Feld ruft den zugehörigen Standardwert auf, während 0 für beide Versätze und die Unschärfe als eingegebener Wert akzeptiert wird. Diese Unterscheidung ist besonders wichtig, wenn der Schatten an der Ausgangsposition bleiben oder ohne Unschärfe ausgegeben werden soll.

Die geprüfte Funktion beschreibt die direkte Zusammensetzung der Deklaration aus den vier Eingaben. Sie legt darüber hinaus keine Aussagen zu Wertebereichen, Rundung oder einer Normalisierung des eingegebenen Farbtexts fest. Deshalb sollten Sie die Farbe in der Form eintragen, in der sie in der Ausgabe erscheinen soll, und die fertige Deklaration anschließend auf die gewünschte Schreibweise prüfen.

Praktisches Beispiel

Für eine Überschrift soll ein nach rechts und unten versetzter, stärker verschwommener Schatten mit einer eigenen Hex-Farbe entstehen.

Geben Sie als horizontalen Versatz 4, als vertikalen Versatz 3, als Unschärfe 6 und als Farbe #33669980 ein und prüfen Sie danach die erzeugte CSS-Deklaration.

Die Ausgabe hat die Form text-shadow: 4px 3px 6px #33669980;.

Einschränkungen

• Geprüft ist die Zusammensetzung aus vier Eingaben und deren direkte CSS-Ausgabe; Angaben zu Wertebereichen, Rundung, Farbformat-Normalisierung oder weitergehender Eingabeprüfung sind nicht enthalten.

Häufige Fehler

• Bleibt ein Feld unbeabsichtigt leer, erscheint dort der passende Standardwert statt Ihrer geplanten Angabe. Tragen Sie deshalb jeden Wert ausdrücklich ein, den Sie selbst festlegen möchten, und lassen Sie nur bewusst gewählte Standardwerte unausgefüllt.

Häufige Fragen

Kann ich einen CSS-Textschatten ohne Versatz und Unschärfe erzeugen?

Wenn Sie beide Versätze und die Unschärfe mit 0 ausfüllen, werden diese Angaben erfolgreich verarbeitet. Für die Farbe können Sie einen eigenen Text eintragen oder das Feld leer lassen, wodurch #00000033 verwendet wird.

Welche Standardwerte nutzt der CSS-Textschatten-Generator?

Bei leerem horizontalem und vertikalem Versatz erscheinen 1 und 1; eine leere Unschärfe wird zu 2, und ein leeres Farbfeld erhält #00000033. Eigene Eingaben ersetzen diese jeweiligen Vorgaben.

Wie sieht die erzeugte CSS-Ausgabe aus?

Die Ausgabe enthält text-shadow: sowie die vier Bestandteile in der Reihenfolge horizontaler Versatz, vertikaler Versatz, Unschärfe und Farbe. Die drei Zahlen tragen px, und ein Semikolon beendet die Deklaration.