CSS3 Generator von css3.me

CSS3-Generatoren erleichtern nicht nur Anfängern das Leben im Umgang mit der „neuen“ Materie. Deswegen werde ich an dieser Stelle sicher auch immer wieder einige Beispiele ausprobieren und vorstellen.

Ich beginne mit dem CSS3-Generator von Peter Funk und Eric Hoffman auf css3.me

CSS3-generator-css3-me

Hier kann man direkt online die Werte eines Kontainers für die Eigenschaften „border-radius“, „box-shadow“, „background gradient“ und „opacity“ mittels Schieber ändern und die Auswirkungen gleich als Vorschau auf dem Bildschirm betrachten. Auch Rahmen- und Hintergrundfarbe sind auswählbar.

Nach Klick auf den Button „get the code“ hat man die Möglichkeit unterschiedliche Browser per Optionsfeld auszuwählen, die bei der Erstellung der CSS berücksichtigt werden sollen.

CSS3-generator-css3-me

Den fertigen CSS3-Code kann man dann sich direkt anzeigen lassen und herunterladen. Unterstützen Browser aus der Auswahl eine bestimmte Eigenschaft nicht, wird dies als Kommentar in den CSS-Code geschrieben.

Hier ist mein erzeugtes Beispiel für einen (div-)Kontainer:

Noch fix die Werte für width und height hinzugefügt, … voila, hier ist mein Beispiel:

An dieser Stelle kurz angemerkt, weil schön zu sehen: browserspezifische Angaben der jeweiligen Eigenschaften sind vorangestellt, das sieht man nicht immer. Dies gewährleistet auch für die Zukunft Sicherheit bzw. Funktionalität der CSS, wenn ein Browserhersteller eine Eigenschaft aus dem experimentellen Stadium herausnimmt.

Der Online-Generator wird seit 2011 weiterentwickelt und ist aktuell in der Version 2.2 vom Mai 2012.