20 Online CSS3 Generators & Tools

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

Schnell-Navigation zu den Kategorien:

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.

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.

CSS3 Generator

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.

Zur Website

CSS3 Click Chart

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.

Zur Website

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.

CSS3 Button Generator – css3buttongenerator.com

CSS3 Button Generator

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.

Zur Website

CSS3 Button Generator – css3button.net

CSS3 Button Generator

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.

Zur Website

Ultimate CSS Gradient Generator

CSS3 Gradient Button 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.

Zur Website

SASS Flat-Button Generator

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.

Zur Website

Fancy Button Generator

Fancy CSS Buttons

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.

Zur Website

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.

Make Awesome Menus

CSS Menu Maker

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.

Zur Website

CSS3 Menu Generator

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.

Zur Website

CSS Menu Builder

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.

Zur Website

CSS3 Menu

Free CSS3 Menu Maker

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.

Zur Website

CSS3 Responsive Dropdown Menu

CSS3 - Full responsive 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.

Zur Website

Pure CSS3 Dropdown MegaMenu

Pure CSS3 Dropdown Mega Menu

Pure CSS3 Dropdown Mega Menu (Quelle: codecanyon.net)

Ein weiteres CSS3 Dropdown Menü, dass auch Formulare, Blogposts und andere Elemente ermöglicht.

Zur Website

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.

Long Shadow Generator

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.

Zur Website

3D Ribbon Generator

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.

Zur Website

CSS Arrow Please!

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.

Zur Website

Picssel Art

Piccsel 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.

Zur Website

CSSWrap – CSS Text to Path

CSSWrap Path Generator

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.

Zur Website

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.

CSS Compressor

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.

Zur Website

Code Beautifier

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%.

Zur Website

Titelbild: ®ollyi – photodune.net