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 & Fluid Spacing
Bis vor nicht allzu langer Zeit musste man ordentlich Verrenkungen unternehmen, um responsive Typographie zu erstellen, ich arbeite hauptsächlich mit SCSS und hatte früher ein komplexes Mixin dafür. Aaaaber: Seit einiger Zeit lässt sich die CSS-Eigenschaft clamp() verwenden, 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 für die Mindest- und Maximalgröße festlegen und man bekommt die clamp()-Eigenschaft mit den nötigen Werten ausgegeben.
Wenn man ein ganzes responsives System mit Fluid Typography und Fluid Spacing inklusive Harmonieregeln aufsetzen will, sind folgende Tools hilfreich: Der Fluid Type Scale Generator sowie der Fluid Space Calculator von Utopia.
clamp() wird von allen halbwegs aktuellen Browsern voll 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 erstellt 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 erstellen. Auch lassen sich dort template-areas anlegen. Ungemein praktisches Tool und gut, um CSS Grid zu üben.
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 den 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 einzelnen 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.
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() eigene Freiformen fest.
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 längst in die verschiedenen 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, gibt noch eine Menge mehr. Habt ihr noch weitere, die unbedingt in die Liste mit aufgenommen werden sollten? Schreibt mir gerne eine Mail, dann füge ich sie noch hinzu :)