Viele CSS3-Effekte bringen eine ganze Reihe von Einstellungsmöglichkeiten mit. Verläufe, Animationen und Schatten ausschließlich per Eingabe der verschiedenen Werte zu erstellen, ist ein mühevoller Weg. Mit dem CSS3-Maker können etliche dieser Effekte über eine grafische Oberfläche erstellt und per Schieberegler anpasst werden.
CSS3-Maker: Einfaches Erstellen von Effekten
Mit dem CSS3-Maker lassen sich abgerundete Ecken („border-radius“), Verläufe („linear-gradient“ und „radial-gradient“), Tranformationen („transform“ mit „scale“, „skew“, „rotate“ und „translate“), Keyframe-Animationen („animation“), Transitions („transitions“), RGBA-Farben („rgba“) sowie Text- und Boxschatten („text-shadow“ und „border-radius“) über eine grafische Bedienoberfläche erstellen.
CSS3-Maker
Außerdem kann mit den verschiedenen Einstellungen für Webfonts („@font-face“) gespielt werden. Das ist ganz hilfreich für jene, die nicht wissen, wie Webfonts korrekt in den verschiedenen Formaten eingebunden werden.
Je nach Effekt stehen unterschiedliche Schieberegler zur Verfügung, mit denen numerische Werte für einzelne CSS-Eigenschaften eingestellt werden können. Über Dropdown-Listen werden weitergehende Einstellungen vorgenommen. Farbwerte lassen sich über einen Farbmischer, wie man ihn aus der Bildbearbeitung kennt, sowie alternativ über drei Regler (jeweils für Rot-, Grün- und Blauton) auswählen.
Eine integrierte Live-Vorschau stellt das jeweils eingestellte Ergebnis dar. So kann schnell und unkompliziert die gewünschte Effekt-Zusammenstellung beurteilt werden. Auch für Animationen gibt es eine entsprechende Vorschau.
Quelltext kopieren und Kompatibilität prüfen
Neben der Live-Vorschau wird auch der CSS-Quelltext automatisch den Einstellungen angepasst. Alle notwendigen Vendor-Präfixe werden gesetzt, so dass der Quelltext optimiert für alle CSS3-unterstützenden Browser kopiert werden kann. Die CSS3-Effekte sind auch als ZIP-Datei herunterladbar. Darin enthalten ist eine HTML-Datei mit den jeweiligen CSS-Eigenschaften.
Da die Browserunterstützung für die verschiedenen CSS3-Eigenschaften sehr unterschiedlich ist, liefert der CSS3-Maker für jeden Effekt eine Liste der unterstützten Browser inklusive der jeweiligen Version mit. Auch die Kompatibilität mit Mobilgeräten (zumindest für Blackberry und iOS) wird angegeben.
Fazit: Mit dem CSS3-Maker lassen sich viele CSS3-Effekte ausprobieren und zusammenstellen. Neben Live-Vorschau und CSS-Quelltext gibt es auch eine Kompatibilitätsübersicht. Der Dienst verdient sich damit eine uneingeschränkte Empfehlung meinerseits!
(dpe)
0 Antworten zu „CSS3-Maker: Komfortable GUI für komplexe CSS3-Effekte“
— was ist Deine Meinung?
man.. klasse teil. genau was ich ab und an mal brauche. dadurch lässt sich ordentlich zeit sparen beim css-coden. ist wirklich zu empfehlen!
Ganz ehrlich: genau sowas habe ich schon lange gesucht! Richtig cooles Tool um auch nochmal einen Überblick über die verschiedensten Effekte zu bekommen. Danke, klasse Tip!
KAnnte ich noch nicht. Find ich gut fürs Ausprobieren, wie was aussehen könnte. Mir wäre vom Design her ein etwas helleres Interface lieber. Aber sicherlich Geschmacksache.