Heute starte ich eine Serie über nützliche Helfer, welche die Umsetzung von CSS3- und HTML5-Eigenschaften vereinfachen und auch lehren wollen.

Den Anfang macht der CSS3 Transform Generator von codfuture.co.uk. Unterhalb eines kurzen Einführungstextes zeigt das Tool an, zu welchen Browsern es kompatibel ist:

Darunter erscheint der Vorschau-Bereich, aufgeteilt in ein Vorschau-Fenster einen Einstellungsbereich. Letzterer enthält Schieberegler und zugehörige Zahlenfelder, in die man Werte direkt eingeben kann. Veränderungen werden im Vorschaufenster direkt angezeigt.

Dabei lässt der Transform Generator folgende Eigenschaften zu:

• Skalierung
• Rotation
• waagerechte Verschiebung (Translate X)
• senkrechte Verschiebung (Translate Y)
• Verdrehung in X-Richtung (Skew X)
• Verdrehung in Y-Richtung (Skew Y)

Zur Veranschaulichung habe ich folgendes Beispiel gewählt:
Zunächst verändere ich die Skalierung auf 1.2; dann setze ich die Rotation auf 40 deg. Nun gebe ich für Translate X 2px und Translate Y -4px an. Schließlich verdrehe ich das Ganze 35 deg in X- und 9 deg in Y-Richtung.
Das Ergebnis sehen Sie hier:

Unter dem Vorschaubereich werden die entsprechenden CSS-Befehle dargestellt, die kopiert und ins eigene Stylesheet eingefügt werden können.

Sie können, wenn über einen entsprechend großen Monitor verfügen, den Einstellungsbereich und die CSS-Vorschau anzeigen und dann mit den einzelnen Parametern spielen. Die Ergebnisse werden sofort in der CSS-Vorschau angepasst, so dass Sie daraus lernen können, wie die einzelnen Parameter in CSS angesprochen werden.

Dabei werden Firefox mit moz-transform, Webkit-Browser (Safari, Chrome) mit webkit-transform, Opera mit o-transform und Internet Explorer mit ms-transform angesprochen. Den W3C-Standard für CSS3 ohne Herstellerbezeichner hat noch kein Browser-Hersteller Sie können, wenn über einen entsprechend großen Monitor verfügen, den Einstellungsbereich und die CSS-Vorschau anzeigen und dann mit den einzelnen Parametern spielen. Die Ergebnisse werden sofort in der CSS-Vorschau angepasst, so dass Sie daraus lernen können, wie die einzelnen Parameter in CSS angesprochen werden.

Dabei werden Firefox mit moz-transform, Webkit-Browser (Safari, Chrome) mit webkit-transform, Opera mit o-transform und Internet Explorer mit ms-transform angesprochen. Den W3C-Standard für CSS3 ohne Herstellerbezeichner hat noch kein Browser-Hersteller umgesetzt. Jedoch sollten Sie ihn einbinden, um mit künftigen Browser-Versionen, die diesen Standard dann unterstützen, kompatibel zu sein.

Hier finden Sie die Leistungen im Rahmen der Web Services von FHCB – Florian Hamberger Computerberatung.