CSS-Box-Schatten mit einem Generator erstellen

Der Generator erstellt aus optionalen Versatz-, Weichzeichnungs-, Ausdehnungs- und Farbwerten eine CSS-box-shadow-Deklaration. Für einen inneren Schatten schalten Sie die dafür vorgesehene Option ein.

Einstellungen vor der Generierung verstehen

Mit dem CSS-Box-Shadow-Generator erstellen Sie eine box-shadow-Deklaration aus wenigen einstellbaren Angaben. Dafür können Sie den horizontalen und vertikalen Versatz, die Weichzeichnung, die Ausdehnung sowie eine Farbe vorgeben. Eine zusätzliche Option kennzeichnet den Schatten als inneren Schatten. Das Werkzeug ist damit hilfreich, wenn Sie die Reihenfolge der Werte nicht manuell zusammensetzen möchten und eine direkt lesbare CSS-Deklaration benötigen.

Die numerischen Eingaben sind optional. Ohne eigene Anpassung stehen 2 für den horizontalen Versatz, 2 für den vertikalen Versatz, 5 für die Weichzeichnung und 0 für die Ausdehnung bereit. Als Farbvorgabe ist #00000033 hinterlegt; der innere Schatten ist zunächst nicht aktiviert. Diese Ausgangswerte können Sie übernehmen oder vor der Generierung durch eigene Angaben ersetzen.

Eine eigene Schatten-Deklaration erzeugen

1. Rufen Sie die Oberfläche des Generators auf und verschaffen Sie sich einen Überblick über die verfügbaren Eingaben. Es gibt vier numerische Felder für den horizontalen Versatz, den vertikalen Versatz, die Weichzeichnung und die Ausdehnung. Dazu kommen ein Textfeld für die Farbe und eine Einstellung für den inneren Schatten.

2. Entscheiden Sie, ob die voreingestellten Werte zu Ihrem gewünschten Schatten passen. Für eine eigene Konfiguration tragen Sie den horizontalen und vertikalen Versatz getrennt ein und ergänzen anschließend die Werte für Weichzeichnung und Ausdehnung. Die Farbe wird in das dafür vorgesehene Textfeld geschrieben. Da die Eingaben optional sind, können Sie einzelne Voreinstellungen unverändert lassen und nur ausgewählte Werte anpassen.

3. Prüfen Sie die Einstellung für den inneren Schatten. Lassen Sie sie deaktiviert, wenn die Deklaration ohne inset ausgegeben werden soll. Aktivieren Sie sie, wenn die erzeugte Deklaration das Schlüsselwort inset enthalten soll.

4. Lösen Sie die Berechnung oder Generierung mit den gewählten Angaben aus. Übernehmen Sie danach die ausgegebene box-shadow-Deklaration an der Stelle, an der Sie den CSS-Wert verwenden möchten. Die vier numerischen Schattenwerte erscheinen in der Ausgabe mit angehängtem px; bei eingeschaltetem innerem Schatten wird zusätzlich inset aufgenommen.

5. Lesen Sie die Ausgabe noch einmal in ihrer Reihenfolge durch, bevor Sie sie in Ihr Stylesheet übertragen. So können Sie kontrollieren, ob der horizontale und vertikale Versatz, die Weichzeichnung, die Ausdehnung und die Farbe zu Ihrer Eingabe passen. Bei dem gezeigten Berechnungspfad wird ein erfolgreiches Ergebnis berichtet.

Ausgabe prüfen und Bedeutung einordnen

Die vier Zahlen stehen in der erzeugten Deklaration für horizontalen Versatz, vertikalen Versatz, Weichzeichnung und Ausdehnung. Danach folgt die angegebene Farbe. Die Einheit px wird an jeden dieser numerischen Werte angehängt, sodass die Ausgabe ihre Werte nicht als unbeschriftete Zahlen darstellt.

Ein innerer Schatten lässt sich an dem zusätzlichen Schlüsselwort inset erkennen. Dieses Wort wird aufgenommen, wenn die entsprechende Einstellung aktiviert wurde, und fehlt bei deaktivierter Einstellung. Die Position von inset vor den numerischen Werten gehört damit zur Form der ausgegebenen Deklaration.

Für einen zentrierten Schatten können Sie beide Versatzfelder auf 0 setzen. In der geprüften Berechnung werden außerdem 0 für Weichzeichnung und Ausdehnung akzeptiert. Solche Nullen bleiben in der Ausgabe als Werte mit px erhalten; sie werden nicht einfach ausgelassen.

Die geprüfte Funktion beschreibt die Erzeugung einer CSS-box-shadow-Deklaration. Daraus folgt keine Aussage über andere CSS-Eigenschaften, über deren Darstellung oder über zusätzliche Gestaltungsmöglichkeiten. Beurteilen Sie deshalb die fertige Wirkung erst in dem Stylesheet und dem Element, in dem Sie die Deklaration einsetzen.

Praktisches Beispiel

Sie möchten einen zentrierten Schatten ohne zusätzliche Ausdehnung und mit einer Weichzeichnung von 8 Pixeln erzeugen.

Für horizontalen und vertikalen Versatz werden jeweils 0, für die Weichzeichnung 8, für die Ausdehnung 0 und für die Farbe #00000033 eingetragen. Die Einstellung für den inneren Schatten bleibt ausgeschaltet, anschließend wird die Generierung ausgelöst.

Die Ausgabe hat die Form box-shadow: 0px 0px 8px 0px #00000033;. Bei aktivierter Einstellung für den inneren Schatten steht inset zusätzlich vor den numerischen Werten.

Einschränkungen

• Die beschriebene Funktion erzeugt eine box-shadow-Deklaration. Aussagen über andere CSS-Eigenschaften oder deren Verhalten sind nicht Bestandteil dieser Anleitung.

Häufige Fehler

• Soll der Schatten innerhalb der Elementfläche liegen, fehlt aber inset, war die Einstellung für den inneren Schatten beim Erzeugen deaktiviert. Aktivieren Sie diese Option und führen Sie die Generierung mit derselben übrigen Konfiguration erneut aus.

Häufige Fragen

Welche Einstellungen kann ich für den CSS-Schatten anpassen?

Sie können den horizontalen und vertikalen Versatz, die Weichzeichnung und die Ausdehnung numerisch anpassen. Außerdem stehen ein Farbfeld sowie eine Einstellung für einen inneren Schatten zur Verfügung; die numerischen Angaben sind optional und besitzen voreingestellte Werte.

Wie erstelle ich einen inneren CSS-Schatten?

Aktivieren Sie die Einstellung für den inneren Schatten, bevor Sie die Deklaration erzeugen. In der Ausgabe erscheint dann inset; bei abgeschalteter Einstellung wird dieses Schlüsselwort nicht ergänzt.

Kann ich für die Schattenwerte 0 verwenden?

In der geprüften Berechnung werden 0 für beide Versatzwerte, die Weichzeichnung und die Ausdehnung akzeptiert. Die vier Werte erscheinen dabei weiterhin mit px in der erzeugten Deklaration.