Wofür CSS-Generatoren gedacht ist
Statt eine CSS-Zeile auswendig zu tippen, stellen Sie hier fünf kleine Einsteller nebeneinander: aus box-shadow, border-radius, einem clip-path, einer transition-Dauer und einem px-/rem-Rechner. An jedem Regler schieben Sie in Echtzeit, das Rechteck daneben zeigt die Wirkung, und das fertige Statement steht darunter zum Kopieren.
Bedienung
- Klappen Sie den benötigten Generator aus der Liste auf.
- Ziehen Sie an den Reglern und beobachten Sie die Vorschau daneben.
- Passen Sie bei Bedarf Farbe oder Dauer über die Felder an und kopieren Sie die CSS-Zeile ins eigene Stylesheet
Typische Anwendungen: Für eine Schaltfläche einen weichen, flach liegenden Schatten in der richtigen Balance aus Versatz und Weichzeichnung finden, Die vier Ecken einer Karte unterschiedlich stark abrunden, ohne jeden Wert selbst zu rechnen, Eine Angabe aus einem Bildschirmentwurf mit 16-Pixel-Basis in rem übernehmen.
Fragen und Antworten
Kann ich das CSS direkt übernehmen?
Ja, das fertige CSS steht unter der Vorschau und kann in Ihr Stylesheet kopiert werden.
Was macht clip-path?
Es schneidet Elemente auf eine beliebige Form zu. Hier wird beispielhaft eine obere Ecke abgeschnitten.
Wie funktioniert die px-rem-Umrechnung?
Es geht von einer Basis von 16 px aus, also 16 px entsprechen 1 rem. Die Felder rechnen in beide Richtungen.
Läuft das offline im Browser?
Ja, alle Generatoren laufen vollständig lokal in Ihrem Browser.
Einschränkungen
Gebaut wird je ein einzelner Wert je Einsteller – mehrere Schatten übereinander, mehrfache Radien pro Ecke oder ein gestaffelter Verlauf setzen Sie nach wie vor von Hand zusammen, weil die Regler nur eine Lage abbilden. Die px-/rem-Rechnung geht von 16 Pixel als Stammgröße aus; weicht Ihr Projekt davon ab, muss die Basis dort eingetragen werden. Nichts wird übertragen, alle Rechnungen laufen lokal.
Was das Werkzeug kann
box-shadow mit X, Y, Weichzeichnung und Ausbreitung, border-radius mit einem Regler, clip-path zum Abschneiden einer Ecke, transition mit einstellbarer Dauer sowie px-rem-Umrechnung
Noch mehr CSS-Helfer: