CSS-Generatoren: Aufgaben und Grenzen
Die CSS-Generatoren vereinen mehrere kleine Helfer für tägliche Layout-Aufgaben. Regler stellen Werte ein, eine Vorschau zeigt die Wirkung, und das fertige CSS kann direkt kopiert werden.
Funktionsumfang
- 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
Anleitung
- Einen der Generatoren aufklappen
- Die Regler nach Wunsch einstellen und die Vorschau beobachten
- Das fertige CSS in das eigene Projekt übernehmen
Grenzen und Voraussetzungen
Die Generatoren decken die häufigsten Fälle ab, keine vollständige CSS-Spielwiese. Bei komplexen Effekten braucht es weiteres CSS von Hand.
Wann es sich lohnt
- Schnell einen Schatten austüfteln
- Abgerundete Ecken ausprobieren
- px-Werte in rem umrechnen
Nachgefragt
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.
Weiterführende Werkzeuge
Diese Werkzeuge passen zu den CSS-Generatoren: