In der Webentwicklung hat sich in den letzten Jahren viel verändert. HTML5 ist inzwischen Standard und CSS3 wird so häufig eingesetzt, dass es zumindest inoffizieller Standard ist. Leider verwenden jeder Browser ein anderes Prefix, so dass bei den neuen CSS3-Styles 3-4 Zeilen Code pro Style notwendig sind. An dieser Stelle können CSS3 Tools viel Arbeit und Zeit sparen.
Update: 29.11.2013
[vc_separator type=““ size=““ icon=“star“]Schnell-Navigation zu den Kategorien:
- 2 Multifunktion CSS Generatoren
- 5 CSS3 Button Generators
- 6 CSS3 Menu Generators
- 5 spezielle CSS Generatoren
- 2x CSS Tuning und Kompression
20 Online CSS Tools & CSS3 Generatoren
Inzwischen gibt es so viele verschiedene Generatoren, dass es mir sinnvoll erschien die besten Tools für euch zusammen zu fassen. Wichtig erschien mir dabei, dass die Tools einfach und schnell zu bedienen sind, schließlich möchtet Ihr Zeit sparen. Dabei erschien mir eine Aufteilung in Kategorien nur konsequent.
[vc_separator type=““ size=““ icon=“star“]2 Multifunktion CSS Generatoren
Niemand möchte ein Dutzend oder noch mehr verschiedene Tools verwenden. Mit diesen Alleskönnern deckt Ihr mit Sicherheit 80-90% der CSS3-Styles ab.
[vc_separator type=““ size=““ icon=“star“]CSS3 Generator
CSS3 Generator (Quelle: css3generator.com)
Ein absolutes Mutlitalent mit 13 verschiedenen Funktionen. Auf der linken Seite kann ihr den Style konfigurieren und auf der rechten Seite erscheint eine Vorschau. Sehr hilfreich ist für mich auch die Information, ab welcher Browser-Version dieser Style unterstützt wird.
[vc_separator type=““ size=““ icon=“star“]CSS3 Click Chart
CSS3 Click Chart – (Quelle: css3clickchart.com)
Das Biest unter den CSS Online Generatoren mit 60! Funktionen. Viele von den beschriebenen Funktionen werden nur von manchen Browsern unterstützt. Schade, dass die Usability des Konfigurators etwas zu wünschen übrig lässt. Nützlich sind dafür die weiterführenden Links zu jedem Style.
[vc_separator type=““ size=““ icon=“star“]5 CSS3 Button Generators
Jede Webseite benötigt Buttons und alleine mit CSS3 lassen sich hervorragend Buttons gestalten. Selbst für Flat Design gibt es schöne Generatoren und Vorlagen.
[vc_separator type=““ size=““ icon=“star“]CSS3 Button Generator – css3buttongenerator.com
CSS3 Button Generator (Quelle: css3buttongenerator.com)
Der Konfigurator für CSS3-Buttons lässt kaum Wünsche offen. Das Einzige, dass etwas fehlt ist die Information über den Browser-Support und Gradients.
[vc_separator type=““ size=““ icon=“star“]CSS3 Button Generator – css3button.net
CSS3 Button Generator (Quelle: css3button.net)
Ein sehr kompakter Generator für CSS3 Buttons mit der Möglichkeit einen Verlauf zu generieren. Einfach zu bedienen und sehr übersichtlich.
[vc_separator type=““ size=““ icon=“star“]Ultimate CSS Gradient Generator
CSS3 Gradient Button Generator (Quelle: dryicons.com)
Wer aufwendige Verläufe in seinen Buttons möchte sollte diesen, an Photoshop angelehnten, Generator verwenden. Aus meiner Sicht auch die Hauptanwendung des Generators.
[vc_separator type=““ size=““ icon=“star“]SASS Flat-Button Generator
Sass Flat Button Generator (Quelle: codepen.io)
Flat Design hat inzwischen in einen festen Stellenwert in der Welt des Webdesign eingenommen. Dieser kleine CodePen stellt 6 Buttons bereit, die mit eleganten Hover-Effekten ausgestattet sind.
[vc_separator type=““ size=““ icon=“star“]Fancy Button Generator
Fancy CSS Buttons (Quelle: codepen.io)
CSS3 bietet auch eine Vielzahl von Animationen. In diesem CodePen wurden 12 verschiedene Animationen dargestellt, die sich besonders für Buttons eignen.
[vc_separator type=““ size=““ icon=“star“]6 CSS3 Menu Generators
Keine Webseite kommt ohne Navigation aus und alleine mit CSS3 lassen sich geniale Menüs gestalten und animieren. Diese Generatoren nehmen euch dabei die meiste Arbeit ab.
[vc_separator type=““ size=““ icon=“star“]Make Awesome Menus
CSS Menu Maker (Quelle: cssmenumaker.com)
Die Seite bietet eine sehr große Auswahl an verschiedenen Vorlagen für CSS3 Menüs. Ein Teil der Menüs ist als Premium Mitglied für einmalig $19 zu erhalten.
[vc_separator type=““ size=““ icon=“star“]CSS3 Menu Generator
CSS3 Menu Generator (Quelle: www.cssportal.com)
Ein vollkommen kostenloser Generator für Menüs. Ihr könnt die Navigationsleiste, alle Ebenen sowie die Hover-Effekte einzeln konfigurieren.
[vc_separator type=““ size=““ icon=“star“]CSS Menu Builder
CSS Menu Builder (Quelle: www.cssmenubuilder.com/home)
Neben den horizontalen Menüleisten bietet dieser Generator auch noch über 700 vertikale Menüs und 200 Breadcrumbs. Ihr könnt damit aus über 1.000 Menü-Kombinationen auswählen und konfigurieren.
[vc_separator type=““ size=““ icon=“star“]CSS3 Menu
Free CSS3 Menu Maker
Jede Menge an Fancy Dropdown Menüs stehen zur Auswahl. Seit kurzem ist auch ein Flat Design und ein Metro Menü vorhanden.
[vc_separator type=““ size=““ icon=“star“]CSS3 Responsive Dropdown Menu
CSS3 – Full responsive Menu (Quelle: www.codecanyon.net)
Dieser Generator bzw. Konfigurator bietet die Möglichkeit ein horizontales responsive Menü zu gestalten. Das CSS Dropdown-Menü ist sehr ausgefallen und schön gestaltet.
[vc_separator type=““ size=““ icon=“star“]Pure CSS3 Dropdown MegaMenu
Pure CSS3 Dropdown Mega Menu (Quelle: codecanyon.net)
Ein weiteres CSS3 Dropdown Menü, dass auch Formulare, Blogposts und andere Elemente ermöglicht.
[vc_separator type=““ size=““ icon=“star“]5 spezielle CSS Generatoren
Diese Tools gehen etwas weiter und erzeugen bereits fertige CSS Effekte und Animationen, die sich dafür eignen eure Webseite zu verschönern.
[vc_separator type=““ size=““ icon=“star“]Long Shadow Generator
Long Shadow Generator (Quelle: codepen.io)
Flat Design ist immer noch ein starker Trend im Webdesign. Mit diesen CSS3 Schatten könnt Ihr eurer Flat Design noch etwas aufbohren.
[vc_separator type=““ size=““ icon=“star“]3D Ribbon Generator
3D Ribbon Generator (Quelle: www.css3d.net/ribbon-generator/)
Ribbons eigenen sich perfekt zum Verzieren von Elementen. Mit diesem Generator erstellt Ihr eure eigenen CSS3 Ribbons in wenigen Minuten.
[vc_separator type=““ size=““ icon=“star“]CSS Arrow Please!
CSS Arrow Please! (Quelle: cssarrowplease.com)
Mit CSS3 lassen sich wunderbar Pfeile an Boxen geschalten, wie sie z.B. bei Tooltips verwendet werden.
[vc_separator type=““ size=““ icon=“star“]Picssel Art
Piccsel Art (Quelle: kushagragour.in)
Falls ihr euren Icons mit CSS3 erstellen wollt ist dieser CSS Generator gut geeignet. Jedes einzelne Pixel wir mit CSS3 erstellt.
[vc_separator type=““ size=““ icon=“star“]CSSWrap – CSS Text to Path
CSSWrap Path Generator (Quelle: csswarp.eleqtriq.com)
Dieses Tool wandelt einen Text in einem Pfad um. Nette Spielerei, das ihr z.B. für ein Logo einsetzen könnt.
[vc_separator type=““ size=““ icon=“star“]2x CSS Tuning und Kompression
CSS Dateien verbrauchen wesentlich weniger Speicherplatz als Grafiken. Dennoch könnt Ihr auch hier mit geschickter Kompression und CSS Tuning noch mehr rausholen.
[vc_separator type=““ size=““ icon=“star“]CSS Compressor
Css Compressor (Quelle: www.csscompressor.com)
Bei meinen CSS Dateien konnte ich mit diesem Tool zwischen 25% und 30% an Dateigröße rausholen.
[vc_separator type=““ size=““ icon=“star“]Code Beautifier
Code Beautifier (Quelle: www.codebeautifier.com)
Mit diesem Tool könnt Ihr ebenfalls euer CSS komprimieren. Bei mir war der Effekt etwas kleiner und ergab eine Komprimierung von 23%.
[vc_separator type=““ size=““ icon=“star“]Titelbild: ®ollyi – photodune.net
