Kuratierte Linksammlung für Webdesigner und -entwickler.
CSS Online-Tools

30 hilfreiche CSS3 Online Generatoren

Webdesign und Entwicklung ist keine einfache Aufgabe ohne nützliche CSS3 Online Tools, erst recht wenn Webtechnologien immer komplexer werden. Fast alle Webagenturen und Webdesigner stehen vor der Herausforderung, steigende Anforderungen an Leistung und Verfügbarkeit bei sinkenden Budgets realisieren zu müssen. Also verbringen Webdesigner eine Menge Zeit damit, Arbeitschritte zu beschleunigen.

Jeder Rennfahrer weiß, dass man auf den Geraden schnell und in den Kurven langsam und vor allem aufmerksam fährt. Das Gleiche muss in Deinem Konzept für die Gestaltung von Websites gelten. Wenn Du gerade an einem Punkt Deines Projekts bist, an dem Du mit voller Geschwindigkeit fahren kannst, dann tue es. Gib Vollgas. Automatisiere Arbeitschritte, nutze Stapel-Verarbeitung, Shortcuts, Workarounds oder Online-Tools. Es geht darum, Arbeitsschritte zu beschleunigen. Warum?

Sprungmarken:

Du wirst Dein Kundenprojekt zwar nicht schneller beenden, jedoch wirst Du Dir mehr Zeit für die Kurven nehmen können. Es sind die kniffligen Passagen, bei denen keine Zeit verloren gehen sollte. Geschwindigkeit richtig einsetzen, ist der Schlüssel für Effizienz.

30 nützliche CSS Online Tools zum Erstellen professioneller Websites

Damit Du Dir mehr Zeit für die Hürden nehmen kannst, möchte ich Dir heute 30 nützliche CSS-Generatoren vorstellen. Diese CSS-Tools sind genau für diesen Zweck entwickelt worden, Zeit zu sparen. Die folgenden CSS-Online-Generatoren können Dir dabei helfen, Deine Produktivität zu steigern, Zeitaufwand zu reduzieren und dennoch elegante, funktionierende und optimierte Webseiten zu erstellen.

All-in-One CSS Online-Generatoren

1. css3.me


css3.me

Der voll anpassbare CSS3 Generator von css3.me lässt sich sehr leicht an Deine Bedürfnisse anpassen. Ältere Browser sowie der Internet Explorer werden zudem unterstützt.

2. layerstyles.org

Der CSS3 Generator von layerstyles.org erinnert stark an die Ebenenstile aus Photoshop. Darin liegt auch die Absicht: Schlagschatten, Innerer Schatten, Hintergrund, Kontur und Abgerundete Kanten lassen sich, wie aus Photoshop gewohnt, erstellen. Der Unteschied ist, dass die Effekt-Ergebnisse hier reines CSS sind.

3. css3maker.com

CSS 3.0 Maker macht insgesamt einen sehr guten Eindruck. Erwähnenswert ist die Anzeige der Browser- und der mobilen Kompatibilität bei jedem generierten CSS-Effekt.

4. css3generator.com

Über das nicht zu übersehende Dropdown-Menü lässt sich der gewünschte Effekt durch einfache Bedienbarkeit generieren.

5. mikeplate.com

Diese Web-Anwendung ist von Mike Plate entwickelt worden und eignet sich hervorragend, um mit den neuen CSS3-Funktionen herumzuexperimentieren. Bearbeite über die linke Menüführung einfach Deinen gewünschten Effekt, auf der rechten Seite siehst Du sofort die Veränderungen.

Diese CSS3-Spielweise funktioniert im Firefox, Chrome, Opera und im Safari. Der Internet Explorer 8 und ältere Versionen dieses Browsers werden jedoch nicht unterstützt. Seit Version 1.4 werden auch Mobile Geräte wie das iPhone, iPad und Android unterstützt.

6. westciv.com

John ist Entwickler von Style Master, einen führenden plattformübergreifenden CSS-Tool. John bietet in seiner CSS3 Sandbox eine Sammlung diverser CSS3-Werkzeuge für Webentwickler an. Geplant ist, die CSS3 Sandbox mit weiteren coolen Tools zu erweitern.

7. css3gen.com

CSS3Gen ermöglicht Dir auf einfache Weise CSS3-Schnipsel zu generieren, die Du direkt in Dein Webprojekt kopieren kannst. Wähle dazu das gewünschte CSS3-Element aus, das Du ganz leicht in Deinem Browser stylen kannst.

8. css3please.com


css3please.com

css3please.com ist ein Cross-Browser CSS3-Element-Generator. Auf den ersten Blick scheint die Bedienung im Vergleich der vorigen Generatoren umständlich zu sein. Doch es ist ganz leicht. Diese Anwendung ist als offene CSS-Datei zu verstehen, die bereits eine Vielzahl an CSS3-Elementen gestylt hat. Alle unterstrichenen Werte können bearbeitet werden. Die Box oben rechts dient als Sofort-Vorschau und enthält die getätigten Änderungen.

CSS3 Button-Generatoren

9. css-tricks.com

Dieser Button Maker zeigt eine Live funktionierende Version Deiner Änderungen am Button mit :hover und :active-Zustand und eine Menge weiter Einstellungsmöglichkeiten. Mit einem Klick auf den generierten Button als Live-Vorschau erscheint der gültige CSS-Code zum Herauskopieren in einem Pop-up-Fenster.

10. css3buttongenerator.com

Der CSS3 Button Generator von css3buttongenerator.com lässt über ein Accordion Menü die Einstellungen am Button vornehmen. Die Änderungen werden sofort an der Button-Vorschau übernommen, ebenso wird der CSS-Code generiert. Eine Besonderheit ist, dass IE-Styles aktiviert werden können, sodass CSS-Filter für den Internet Explorer in das Styling implementiert werden.

11. css3button.net

Dieser CSS3 Button Generator ermöglicht das Erstellen von einfachen CSS3 Buttons. Zusätzliche Effekte wie :hover und :active werden hier nicht berücksichtigt. Außerdem werden keine IE-Styles generiert. Jedoch werden Transparente Farben mit der CSS3-Funktion RGBA generiert. Über den Showcase- und Random-Bereich können außerdem eine Vielzahl von usergenerierten Buttons als Inspirationen dienen.

12. ccssbuttongenerator.com

Dieser Button Generator erstellt schöne CSS-Buttons, ohne Verwendung von Bildern, die Du für Deine Website nutzen kannst. Über die rechte Werkzeugleiste kannst Du Deinen Button stylen, Du kannst sogar eine eigene CSS-Klasse für Deinen Button bestimmen. Sobald der gewünschte Button designt worden ist, wird durch einen Klick auf den obigen großen blauen Button der CSS-Code generiert.

13. dryicons.com

Optisch etwas weniger ansprechend, jedoch funktional. Diverse Einstellungsmöglichkeiten, (sogar die Hintergrundfarbe des Button Generators kann geändert werden) ermöglichen nette Effekte.

CSS Layout-Generatoren

14. guidefordesign.com

Ein einfacher CSS Template Generator. Über eine intuitive 3-Schritte-Anweisung wird nach Generierung beschrieben, wie das Template zum Einsatz kommt.

15. csslayoutgenerator.com

Dieser CSS-Layout Generator ist bereits auf HTML5 eingestellt und berücksichtigt sogar CSS Reset. Neben flexibler Breite, können Header und Footer-Format, Anzahl der Sidebars und deren Breite definiert werden. Nach dem Generieren wird eine .zip-Datei bereit gestellt, in der eine HTML und eine CSS archiviert sind, die als Grundgerüst Deiner zukünftigen Website dienen können. Dieser CSS Layout Generator kann mit Chrome, Firefox, IE 6+, Opera und Safari genutzt werden.

16. cssportal.com

Dieser Generator erstellt entweder eine feste Breite oder eine Flexible. Zudem können Header, Footer und sogar ein Menü eingebunden werden. Weitere Optionen sind: Wahl des doctypes, abgerundete Kanten, minimale- und maximale Breite. Nachdem Du die Einstellungen vorgenommen hast, kannst Du das Ergebnis in einer Demo-Ansicht überprüfen und als .zip-Datei heruntergeladen.

17. pageblox.com

PageBlox ist ein CSS-Layout-Generator, der für angehende Webdesigner und Entwickler entwickelt wurde, die schnell professionelle HTML5/CSS3 Layouts erstellen möchten. PageBlox wird bereits von hunderten Webentwicklern genutzt, die auf einem soliden Fundament ihre Projekte realisieren und ihren Workflow optimieren möchten.

18. thenoodleincident.com

Eignet sich eher für Einsteiger, die sich mit CSS auseinandersetzen und lernen möchten. HTML wird hierbei nicht generiert.

19. csscreator.com

Dieser CSS-Layout-Generator wurde im Oktober 2003 von Tony Aslett veröffentlicht, seitdem wurden mit diesem Layout-Generator über 871.000 Layouts erzeugt. Aktualisiert im November 2010, können nun auch HTML5-Layouts ausgewählt und eine einfache HTML5-Vorlage mit entsprechenden Tags erstellt werden. Andere HTML und XHTML doctypes sind zusätzlich noch verfügbar.

Der Generator hilft Dir beim Erstellen der Struktur Deines Templates mit validem HTML und CSS. Du kannst eine dynamische oder feste Breite, Spalten-Layout bis zu 3 Spalten sowie Kopf-und Fußzeile wählen. Die Werte können entweder in Pixel, ems oder Prozentsätze angegeben werden. Der Generator benötigt einen modernen DOM-fähigen Browser mit aktiviertem JavaScript.

20. developer.yahoo.com

„YUI 2: Grids CSS“ bietet vier voreingestellte Seiten-Breiten, sechs voreingestellte Templates und die Möglichkeit zu stapeln und zu verschachteln. Die 4KB Datei enthält über 1000 Seitenlayout-Kombinationen.

CSS Menü-Generatoren

21. cssmenumaker.com

CSSMenuMaker.com gibt Webmastern ein Werkzeug in die Hand, um benutzerdefinierte und Cross-Browser kompatible Menüs zu erstellen. Der Menü-Generator macht es einfach, benutzerdefinierte CSS-Menüs zu erstellen, ohne über komplexeres HTML- und CSS- Wissen verfügen zu müssen. Solltest Du ein erfahrener Webdesigner sein, bietet dieser Generator den Quellcode für alle CSS-Menüs, die Du herunterladen, optimieren und in Deine Websites integrieren kannst.

22. cssmenubuilder.com

Dieser CSS Menü-Generator ist ein kleiner Beitrag für die Welt der Webdesigner, Programmierer und Webenthusiasten, die keine Zeit haben, sich mit Photoshop auseinanderzusetzen oder dies nicht wollen. Dieser Generator bietet über 300 horizontale Menüs, über 700 Vertikale und mehr als 200 Breadcrumb-Menüs. Insgesamt bietet cssmenubuilder.com mehr als 1000 Menü-Kombinationen.

CSS3 Verlauf-Generatoren

23. colorzilla.com

Wie Du vielleicht weißt, hat HTML5 viele spannende Features für Webentwickler eingeführt. Eines dieser Merkmale ist die Fähigkeit, Verläufe mit reinem CSS3 anzugeben, ohne dabei auf Bildmaterial zurückzugreifen. Um den Verlauf-Generator fehlerfrei nutzen zu können, benötigst Du eine aktuelle Version von Firefox, Chrome, Safari, Opera oder IE.

24. microsoft.com

Diesen CSS Hintergrund-Verlauf-Generator von Microsoft kannst Du nutzen, um Hintergrund-Verläufe auf der Basis von CSS3 zu erstellen. Das CSS-Markup funktioniert im Chrome, Firefox, Opera, Safari und im Internet Explorer 10.

25. display-inline.fr

Dieser CSS-Code-Generator erzeugt Hintergrundverläufe auf CSS3-Basis. Dieser Farbverlauf-Generator ist eine Testversion, der generierte Code könnte nicht in jedem Fall funktionieren. Also einfach mal testen. Am besten funktioniert dieser Generator im Firefox 3.6+, Safari 4 oder im Chrome 4.

CSS Border Radius Generator

26. border-radius.com

Dieser Generator zur Kantenabrundung ist ein Service von Jacob Bijani, Produkt-Ingenieur bei Tumblr. Zu diesem Generator gibt es nicht viel zu sagen. Einfach ausprobieren.

CSS Text Shadow-Generator

27. wordpressthemeshock.com

Dieser einfache Generator erzeugt 12 unterschiedliche CSS-Textschatten-Effekte. Der CSS-Code wird über ein Popup-Fenster ausgegeben, indem der CSS-Code zwar angepasst werden kann, das Ergebnis wird jedoch nicht in der Demo-Ansicht übernommen. An der Benutzerfreundlichen- und individuellen Einstellungen könnte noch etwas gefeilt werden. Wie einfach der CSS3-Textschatten-Effekt manuell erzeugt werden kann, erkläre ich in diesem Artikel.

CSS Text zu Pfad-Generator (Warp)

28. csswarp.eleqtriq.com

Erstelle Texpfade mit reinem CSS und HTML (bekannt aus Adobe Illustrator).

CSS3 bietet neue text-transform-Optionen: Drehen, Neigen, Veränderung in einer Matrix etc. Durch das Anwenden der Transformationen auf jeden einzelnen Buchstaben ist es möglich, die Illusion zu erzeugen, dass der Text auf einem Pfad erstellt wird. Du kannst den Pfad und die Texteigenschaften nach Belieben ändern. Nachdem Du fertig bist, kannst du den Code über den „Generate HTML“-Button erstellen lassen.  Den generierten CSS- und HTML-Code kannst Du nun in Dein Website-Dokument einbinden. Echt Abgefahren!

CSS-Komprimierung

Hinweis:
Egal welches Tool zur CSS-Kromprimierung Du verwendest, solltest Du in jedem Fall vor dem Komprimierungs-Prozess Deine Originaldatei sichern!

29. codebeautifier.com

Code Beautifier ist ein CSS Formatierer und Optimierer, das fünf unterschiedliche Komprimierungen ermöglicht. Über umfangreiche Optionen lassen sich Komprimierungsraten von über 41 % erzielen.

30. csscompressor.com

Der CSS Compressor bietet Dir vier verschiedene Kompressionsstufen (Gering, Standard, Hoch, Höchste). Weitere Optionen zur Komprimierung sind: Eigenschaften sortieren, Farbwerte und Schriftstärke komprimieren, Entfernen unnötiger Semikolons oder Selektoren in Kleinbuchstaben. Ich habe meine Theme-CSS-Datei mit diesem Online-Tool komprimieren lassen. Der Optimierungsvorgang verkleinert die CSS-Datei um etwa 35%.

31. cssdrive.com

CSS Drive als CSS Online-Tool bietet den Anwender zwei Versionen zur CSS-Optimierung (normal und erweitert). Der normale Bearbeitungsmodus lässt drei Kompressionsmöglichkeiten zur Auswahl (Light, Normal & Super Compakt). Im erweiterten Modus kannst Du im Detail angeben, wie Deine CSS-Daten komprimiert werden sollen. Nach Komprimierung erreicht die CSS-Datei eine Einsparung von etwa 33%.

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

10 Antworten auf "30 hilfreiche CSS3 Online Generatoren"

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige