Als Frontend-Developer erleben wir in den Zeiten von CSS3 neuen Luxus. Immer seltener bemühen wir Grafik-Tools wie Photoshop um visuelle Reize zu setzen. Runde Ecken beeindrucken dabei schon keinen mehr. Inzwischen geht es um "echte" Layouts aus dem Printbereich, Animationen, Verläufe, den "Float-Killer" FlexBox usw.
Doch beim alltäglichen Arbeiten mit den neuen und teilweise schon bewährten CSS3-Features stellt sich die Frage danach, wie die tollen Eigenschaften in unsere Stylesheets kommen und welche Fixes die zahlreichen Browser benötigen. Nun kann ich natürlich zu jeder Eigenschaft das Manual bemühen und jeden Wert von Hand setzen. Wohlmöglich auch noch mit den üblichen Browser-Prefixes damit es auch in allen relevanten Browsern passend ausschaut. Das ist natürlich bei weniger komplexen Eigenschaften wie z. B. text-shadow kein Problem, wird aber schon aufwändiger wenn es um Animationen oder Übergänge geht. Stichwort Bezierkurve.
Hier kommen die sogenannten CSS3-Generatoren ins Spiel. Kleine, nützliche Tools und Services, die im Netz zu finden sind, erleichtern uns die Frontend-Arbeit. Der Basis-Code wird von den Tools generiert und kann ins Stylesheet kopiert werden. Danach sollte es "nur noch" um die Feinheiten und Nachjustierung des generierten Codes gehen. Ein zweiter großer Vorteil, den die Tools uns bieten ist, dass ich Änderungen im Code direkt simulieren und nachvollziehen kann, ohne manuell eingreifen zu müssen. Häufig ist auch einstellbar, welche Browser unterstützt werden sollen.
Folgende Services seien einmal kurz vorgestellt:
CSS3 Generator
Der CSS3 Genrator bietet eine Vielzahl Funktionen rund um CSS3. Z. B. Transitions, Gradients und Multiple Columns.
CSS3.me
css3.me erstellt eine moderne Box nach den Vorgaben des Anwenders (border-radisu, box-shadow, background, gradient, opacity)
css3please
Einer meiner Favoriten. Anhand eines Code-Snippets der manuell bearbeitet werden kann wird eine Box generiert.
Oder der css3clickchart
Auch ein Spitzen-Tool. Einfach die gewünschte Eigenschaft auswählen. die Live Demo betrachten und bei Bedarf den Code kopieren.
Das sind nur einige. Es gibt noch eine Vielzahl weiterer Services. Schaut sie euch an und erweitert eure Bookmarks: Css3.0 Maker, Button Maker, Column Generator, Westciv vereint gleich mehrere Generatoren und stellt einige weitere vor. Gradient Generator, oder den Menu Generator.
Könnt ihr noch weitere Tools empfehlen, die die Produktivität steigern?