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:
- All-in-One CSS3-Generatoren
- Button-Generatoren
- Layout-Generatoren
- Menü-Generatoren
- Verlauf-Generatoren
- Border-Radius Generator
- Textschatten-Generator
- Text zu Pfad-Generator (Warp)
- CSS Optimizer Generatoren
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
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 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%.
Super Zusammenfassung!
Seite ist bereits bebookmarked!
Danke!
Das freut mich! :-)
Sehr schöne Sammlung…auch gebookmarkt und weiterempfohlen…
Sehr schöne Übersicht.
Vielen Dank für deine Mühen!
Schöne Sammlung!
schon mal selfCSS ( http://selfcss.org/ ) ausprobiert?
Hi Simon,
selfCSS kannte ich noch nicht. Es sieht ja sehr vielversprechend aus. Danke für den Tipp! :-)
Great collection. Thanks for sharing!!!
Dies ist eine weitere sehr nützliche Website, sollten Sie zu Ihrer Liste hinzufügen http://www.generatecss.com
Ich nutze immer den curly braces Generator. Das schlichte und eindeutige Design haben mich dort einfach überzeugt.
simple css generators http://www.cssreflex.com/css-generators/