CSS Schatten-Generator – Kurzanleitung

Dieser Schatten-Generator ermöglicht es dir, interaktiv CSS-Schatten zu erstellen und den entsprechenden CSS-Code dafür zu generieren. Du kannst sowohl Text-Schatten (text-shadow) als auch Element-Schatten (box-shadow) erzeugen und die verschiedenen Parameter wie Versatz, Unschärfe, Stärke und Farbe anpassen.

Grundfunktionen:

1. Vorschau (Preview):

   • Der zentrale Bereich im Widget ist die Vorschau. Hier wird der erstellte Schatten in Echtzeit auf ein Element (z. B. einen Text oder ein Rechteck) angewendet, während du Änderungen vornimmst.
   • das Vorschau Element kann durch einen Dropdownmenü zwischen box und text Schatten gewechselt werden.

2. Schatten-Typ:

   • Box-Schatten: Dies ist ein Schatten, der um ein Element herum erzeugt wird.
   • Text-Schatten: Dies ist ein Schatten, der hinter einem Text erzeugt wird.

3. Schatten-Parameter:

   • Horizontaler Versatz (X-Offset):
     • Dieser Wert bestimmt, wie weit der Schatten horizontal vom Element entfernt ist.
     • Positive Werte verschieben den Schatten nach rechts, negative Werte nach links.
     • Einstellung: Mit einem Schieberegler (x-offset) kannst du den Wert anpassen.
   • Vertikaler Versatz (Y-Offset):
     • Dieser Wert bestimmt, wie weit der Schatten vertikal vom Element entfernt ist.
     • Positive Werte verschieben den Schatten nach unten, negative Werte nach oben.
     • Einstellung: Mit einem Schieberegler (y-offset) kannst du den Wert anpassen.
   • Unschärfe (Blur):
     • Dieser Wert bestimmt, wie stark der Schatten verschwommen ist.
     • Ein Wert von 0 erzeugt einen scharfen Schattenrand.
     • Höhere Werte erzeugen eine stärkere Unschärfe.
   • Ausdehnung (Spread):
     • Dieser Wert bestimmt, wie stark der Schatten „aufgebläht“ oder „zusammengezogen“ wird.
     • Positive Werte vergrößern den Schatten, negative Werte verkleinern ihn.
     • Einstellung: Mit einem Schieberegler (spread) kannst du den Wert anpassen.
   • Farbe:
     • Hier legst du die Farbe des Schattens fest.

4. CSS-Code:

   • Anzeige: Der generierte CSS-Code wird im Textfeld „CSS Code“ (css-code) angezeigt.
   • Kopieren: Mit dem „Code kopieren“-Button (copy-code-button) kannst du den Code in die Zwischenablage kopieren.

Kurz gesagt:

1. Wähle den Schatten-Typ (Box-Schatten oder Text-Schatten).
2. Passe die Parameter des Schattens an (Versatz, Unschärfe, Ausdehnung, Farbe).
3. Betrachte die Vorschau und den generierten CSS-Code.
4. Kopiere den Code und verwende ihn in deinem Projekt.