HTML und CSS Logo

CSS-Generatoren & Tools

CSS macht Spaß, einige Eigenschaften sind aber sehr frickelig und lassen sich besser mit Werkzeugen visualisieren. Hier sind einige Tools im Web, die ich gerne nutze.

Fluid Typography

Bis vor nicht allzu langer Zeit musste man ordentlich Verrenkungen unternehmen, um responsive Typographie zu erstellen, ich arbeite hauptsächlich mit SCSS und hatte ein komplexes Mixin dafür. Aaaaber: Mittlerweile gibt es die CSS-Eigenschaft clamp(), die macht die Welt wesentlich einfacher. Mit der Fluid Typography-Webapp von Erik-André Jakobsen kann man minimale und maximale Schriftgrößen sowie zwei Breakpoints festlegen und man bekommt die clamp()-Eigenschaft mit den nötigen Werten ausgegeben.
clamp() wird von allen halbwegs aktuellen Browsern (also nicht IE) unterstützt, siehe caniuse.com.

CSS Grid Generator

Von Sarah Drasner gibt es den CSS Grid-Generator, mit dem man sich, wie der Name sagt, Code für CSS Grid erzeugen kann. Man erzeugt sich ein Grid und kann dann per Ziehen in der Vorschau Boxen erzeugen, die sich über die gewünschten Felder erstrecken.

Wesentlich komplexere Grids mit mehr Einstellungen lassen sich über den Generator Layoutit von LenioLabs erzeugen. Auch lassen sich dort template-areas anlegen. Ungemein praktisches Tool.

Button Maker

Von CSS-Tricks gibt es einen simplen Button Generator mit interaktiver Vorschau. Dort kann man sich einen Button inklusive hover- und active-Status anlegen und der CSS-Code dafür kopieren. Es gibt reichlich solche Generatoren für Buttons im Netz, allerdings fehlen mir bei denen eben die Möglichkeit, die einzeln Status festzulegen. (Ich musste übrigens erstmal googlen, was der korrekte Plural von „Status“ ist 😁)

CSS Gradient Generatoren

Hier habe ich auch zwei Generatoren zur Auswahl. Zum einen cssgradient.io , zum anderen den Generator auf cssgenerator.org. Den ersten finde ich visuell ansprechender, von daher greife ich gerne darauf zurück. Die Farbwerte lassen sich bei beiden Generatoren in HEX und rgba() angeben bzw. auswählen. Auch cool bei cssgradient.io: Man kann ein Bild hochladen und es werden Farbwerte daraus übernommen.
Wer auf eine vorgefertigte Bibliothek zurückgreifen möchte, dem empfehle ich gradientmagic.com. Dort gibt es teilweise sehr komplexe Verläufe zur Auswahl, die sich nach Wunsch anpassen lassen.

box-shadow mit shadows.brumm.af

Mit shadows.brumm.af lassen sich komplexe Box-Schatten erstellen. Man ist nicht nur auf einen Schatten beschränkt, sondern kann bis zu zehn davon anwenden, sodass der Kreativität und der Optik kaum Grenzen gesetzt sind. Sehr feingranuliert mit vielen Reglern anpassbar und sehr handlich. Der Code wird direkt angepasst und lässt sich per Copy & Paste ins Projekt einfügen.

clip-path mit Clippy

In heutigen Zeiten ist man ja nicht nur auf rechteckige Objekte beschränkt, clip-path sei Dank. Ein für mich unverzichtbares Tool dafür ist der clip-path-Maker Clippy von Bennett Feely. Alle möglichen Formen sind wählbar, oder man legt über polygon() eigen Freiformen fest.

border-radius mit 9elements

Wo wir bei Formen sind: mit 9elements lassen sich freie Formen mit border-radius generieren. So kann man sich die beliebten Blobs erzeugen. Es gibt per Umschalter eine simple und eine komplexe Version mit mehr Anfassern, um mehr Einfluss auf die Form zu nehmen.

border-image.com

Wie der Name schon sagt: border-image.com ist ein visueller Generator, um seine Rahmen mit Bildern und der der CSS-Eigenschaft border-image zu schmücken. Bild hochladen, anpassen, CSS-Code kopieren, fertig.

CSS-Filter

Auf Codepen hat ein gewisser Jordano Aragao ein cooles Tool für CSS-Filter hinterlegt, um interaktiv CSS-Filter zur Bildmanipulation zu erzeugen.

Ein weiterer Vertreter ist der Filter CSS Generator auf cssgenerator.org , der auch sofort eine Vorschau anzeigt.

Aspect-Ratio

Der Generator Ratiobuddy dürfte so gut wie obsolet sein, da die CSS-Eigenschaft aspect-ratio in die neueren Browser-Versionen Einzug gehalten hat. Zur Abwärtskompatibilität und zur Kompatibilität mit dem Internet Explorer, wenn man sie traurigerweise noch braucht, ist dieser Generator aber vielleicht noch ganz nützlich. Von daher habe ich ihn in diese Liste mit aufgenommen.

Jo, das waren einige Tools. Habt ihr noch weitere, die ihr nutzt? Schreibt mir gerne eine Mail, dann füge ich sie noch hinzu 🙂