Programmierung

Top 5 CSS Generatoren

  • 21/09/2012

Mit CSS3 wurde im Laufe der Entwicklung eine Reihe von neuen Style-Eigenschaften eingeführt. Viele dieser Eigenschaften wurden noch nicht als W3C-Standard definiert, weshalb jeder Browser seinen eigenen Workaround zur Verfügung stellt.

Eine schnelle Lösung zur Erstellung der Eigenschaften muss also geschaffen werden. Abhilfe schaffen CSS Generatoren, die auf diversen Webseiten zur Verfügung gestellt werden. Die Einarbeitung durch stundenlanges Lesen in Büchern, Blogs und Foren wird durch anschauliche Beispiele ersetzt.

Wir möchten Ihnen in diesem Artikel die von uns am häufigsten verwendeten Generatoren näher bringen.

Layerstyles – graphics editor

Der grafische Editor von layerstyles.org ist eine Sammlung mehrerer Eigenschaften, der vom Design her stark an Photoshop erinnert. Der Editor generiert einen umfangreichen CSS Code.

CSS Layer Style

theWebRocks – 3D CSS Tester

Der 3D CSS Tester von thewebrocks.com zeigt anschaulich die Benutzung dreidimensionaler Eigenschaften. Leider generiert der Generator ausschließlich Code für den aktuell verwendeten Browser, sofern dieser 3D unterstützt. Für andere Browser müssen Codezeilen manuell nachgetragen werden. Bitte beachten: Opera unterstützt derzeit noch kein 3D und der Internet Explorer erst ab Version 10.

css 3d tester

CSS-drop-shadow

Mit dem Generator von wordpressthemeshock.com können unterschiedliche Arten von Schlagschatten mit Leichtigkeit erzeugt werden.

css drop shadow

Colorzilla – gradient-editor

Die umfangreichen Vorlagen machen den Farbverlauf-Editor von www.colorzilla.com unverzichtbar. Der generierte Code beinhaltet zu jeder Eigenschaft einen Kommentar mit Beschreibung, welcher Browser damit angesprochen werden soll.

css gradient editor

Border-radius

Border-radius.com stellt einen Generator zum Anpassen des border-radius zur Verfügung. Gerade die vereinfachte Darstellung macht die Arbeit kinderleicht.

css border radius

 

Leider werden viele Eigenschaften von einigen Browsern noch nicht unterstützt. Für diese Browser gilt es stets einen Fallback zu bauen.

Welchen CSS-Generator nutzen Sie, der hier nicht aufgeführt ist? Was halten Sie von derartigen Generatoren?

Teasergrafik: Steam engine, St Mary’s Mill (Chris Allen) / CC BY-SA 2.0