Vorheriger Artikel Nächster Artikel

WebKit: Was mit 3D-Transforms und CSS-Maskierungen möglich ist

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

Browserhersteller preschen mitunter vor und implementieren neue HTML- oder CSS-Features. Diese funktionieren dann zunächst zwar nur in einer Browserfamilie; gute Ideen haben aber durchaus die Chance, ihren Weg in die W3C-Spezifikationen zu finden und auch in anderen Browsern umgesetzt zu werden.

WebKit: Was mit 3D-Transforms und CSS-Maskierungen möglich ist

Webseiten mit z-Achse

Das WebKit-Entwicklerteam hat im März 2009 3D-Transforms vorgeschlagen, die es erlauben, Elemente einer Webseite in einem dreidimensionalen Raum anzuzeigen [1]. Das Feature wurde in Safari, Chrome und für iOS und Android implementiert. Mittlerweile hat auch Firefox die Eigenschaft eingebaut, sodass die Technologie für Webworker durchaus attraktiv ist.

Konkret funktionieren 3D-Transforms jeweils ab Chrome 12, Firefox 10, Safari 4, iOS Safari 3.2, Android Browser 3.0 [2]. Der Internet Explorer will ab Version 10 dabei sein. Opera ist noch außen vor, aber auch hier soll eine Umsetzung in Arbeit sein.

3D-Transforms fügt der Webseite eine z-Achse hinzu, auf der Elemente bewegt werden können. Dabei handelt es sich um eine „echte“ z-Achse, im Gegensatz zum bekannten z-Index. Analog zu 2D-Transformationen werden auch die Änderungen in drei Dimensionen mit einer einzelnen CSS-Eigenschaft angewendet.

Die transform-Eigenschaft mit allen Vendor-Prefixes

#element{
 -webkit-transform: foo bar;
 -moz-transform: foo bar;
 -ms-transform: foo bar;
 -o-transform: foo bar;
 transform: foo bar;
 }

Listing 1

Nun kommen verschiedene weitere Eigenschaften und 3D-Funktionen hinzu. So drehen sich Elemente mit rotateX(Winkel), rotateY(Winkel) bzw. rotateZ(Winkel) um die entsprechende eigene Achse. In der folgenden Abbildung sind die Bilder jeweils in einem DIV untergebracht. Bild 1 zeigt das Original, Bild 2 ist über rotateX um 45 Grad, Bild 3 über rotateZ ebenfalls um 45 Grad gedreht.

dms 83dc3607f25872fec590c8fd20adc564
Original und gedrehte Bilder um die X- bzw. Z-Achse.

Während Bild 3 richtig gedreht aussieht, wirkt Bild 2 gestaucht und wenig dreidimensional. Das liegt an der Eigenschaft „transform-style“. Initial steht dieser Wert auf „flat“ und sorgt dafür, dass Kindelemente flach auf das Elternelement projiziert werden. Die Eigenschaft „transform-style: preserve-3d“ beim Eltern-DIV sowie ein Wert für die Perspektive – etwa „perspective: 200px“ – sorgen bei Drehungen um die x- oder y-Achsen für den echten 3D-Effekt.

dms ce9b6953d55f2ca606a72ab074d28eac
„transform-style“ und „perspective“ sorgen für einen „echten“ 3D-Effekt.

„Perspective“ kann dabei als Abstand zum Objekt gesehen werden. Die technische Erklärung ist etwas komplexer, aber grob gesagt beeinflusst die Eigenschaft den Grad der 3D-Verzerrung.

CSS-Anweisungen für eine Drehung um die x-Achse

div {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-perspective: 200px;
 -moz-perspective: 200px;
 -ms-perspective: 200px;
 -o-perspective: 200px;
 perspective: 200px;
}
div img {
 -webkit-transform: rotateX(45deg);
 -moz-transform: rotateX(45deg);
 -ms-transform: rotateX(45deg);
 -o-transform: rotateX(45deg);
 transform: rotateX(45deg);
}

Listing 2

Mit 3D-Transforms lassen sich Elemente auf der x-, y- und z-Achse auch bewegen oder skalieren. Hier lohnt ein Blick in die Spezifikationen [1]. Außerdem können 3D-Transforms für hübsche Effekte mit Transitions und Animations verknüpft werden [3].

CSS-Maskierungen

Das WebKit-Team brachte auch CSS-Maskierungen ins Spiel [4]. Im Gegensatz zu 3D-Transforms gibt es zu den Masken aber lediglich ein Proposal und keinen W3C-Working-Draft. Die Eigenschaften funktionieren ab Chrome 17, Safari 5, im aktuellen iOS-Safari und Android-Browser. In der einfachsten Form lässt sich mit der Eigenschaft „-webkit-mask-image“ ein transparentes PNG hinzufügen. Das Bild wird wenn nötig gekachelt, um den gegebenen Platz auszufüllen, und dient dann als Maske.

dms 3a0bfb51d1db0309ae5937f07e92643a
Ist die Maske kleiner als das Element, wird sie gekachelt.

Alternativ kann man die Maske auch über „-webkit-mask-box-image“ verwenden; in diesem Fall wird die Maske allerdings gestreckt, um die Dimensionen des Bilds auszufüllen.

Beispiel einer Maske

<img xsrc="blumen.jpg" alt="..." style="-webkit-mask-box-image: url(maske.png);" />

Listing 3

dms 92864b5779db7265cd06b36f4128c199
Original, Maske und Ergebnis mit mask-box-image.

In der Maske selbst können auch Verläufe genutzt werden. Statt transparenter PNG-Bilder sind auch CSS-Gradienten und SVG-Dateien möglich. Außerdem lassen sich mehrere Masken übereinanderlegen oder mittels der „border-image“-Syntax verknüpfen.

dms 10730055a93a01225a0ac7871832fb0e
Maske mit Verläufen.

Weitere WebKit-Ideen

In den WebKit-Engines stecken noch weitere CSS-Features, die andere Browser (noch) nicht bieten [5]. Vor einiger Zeit war es etwa schick, Bilder direkt darunter gespiegelt darzustellen. Für solche Reflexionen bietet eine eigene Syntax.

Gespiegelte Elemente einfach per erzeugen

-webkit-box-reflect: below 5px;
-webkit-box-reflect: below 0 url(maske.png);

Listing 4

Die Reflexion können „above“, „below“, „left“ oder „right“ angezeigt werden. Außerdem ist der Abstand zum Original nötig; die Kopie erscheint dann entsprechend gespiegelt neben dem Bild. Außerdem lässt sich leicht eine Maske hinzufügen, um die Reflexion etwa über einen Verlauf in der Maske auszublenden.

dms 596a78aa452b9c823484ae636c226ce4
Outlines in WebKit mit text-stroke.

Ebenso nur bei WebKit-Browsern zu haben: Outline für Texte. Die Syntax ist auch hier sehr einfach: Per „-webkit-text-stroke“ gibt man einem Text in Shorthand-Schreibweise Dicke und Farbe mit. Außerdem kann letztere transparent gesetzt werden, um nur die Kontur anzuzeigen.

Echte Outlines mit CSS

color: transparent;
-webkit-text-stroke: 2px #09C;

Listing 5

In Firefox, Opera und Internet Explorer 10 steht zwar kein „text-stroke“ zur Verfügung, der Effekt lässt sich aber durch vier Textschatten simulieren, indem mit „text-shadow“ jeweils ein Schatten um ein Pixel nach oben, unten, rechts und links verschoben wird. Allerdings wirkt das nur bei einem Pixel Dicke einigermaßen sauber. Darüber hinaus werden Lücken in der Outline sichtbar [6]. Insofern hat „text-stroke“ durchaus seinen Sinn und findet vielleicht seinen Weg in die CSS-Spezifikationen.

Außerdem sorgt WebKit für ein Wiedersehen mit alten Bekannten: Marquee-Texten, also Laufzeilen. Dafür gibt es bereits das HTML-Element <marquee>. Dieses wurde einst von Microsoft eingeführt und gehört nicht zum HTML-Standard. Allerdings wird das Element tatsächlich von IE, Chrome, Firefox, Safari und Opera unterstützt. WebKit bietet nun außerdem eine Marquee-Lösung per CSS an, die zusätzliche Konfigurationen erlaubt.

Syntax einer CSS-Laufschrift

-webkit-marquee: direction increment repetition style speed

Listing 6

Neben Richtung und Geschwindigkeit lässt sich etwa die Anzahl der Wiederholungen festlegen. Der Style regelt, ob sich der Lauftext hin- und herbewegt oder sich in der festgelegten Richtung wiederholt. Das Problem mit Lauftexten aber ist die Geschwindigkeit: Für einige bewegt sich der Text zu schnell, für andere zu langsam. Allerdings mag die Eigenschaft für kleine Bildschirme hilfreich sein, wenn tatsächlich nur etwas Platz fehlt, um zwei, drei Wörter darzustellen. Statt die Box zu vergrößern oder den Text abzuschneiden, kann ein CSS-Marquee eine sinnvolle Alternative sein.

Links und Literatur

Softlink 3137
  1. 1 http://t3n.me/3dTransform
    Working Draft für 3D-Transforms
  2. 2 http://t3n.me/3dTransBrowser
    3D-Transforms in div. Browsern
  3. 3 http://t3n.me/3dRotation
    3D-Rotationen mit einem Kubus
  4. 4 http://t3n.me/CSSMasks
    Vorschlag für CSS-Masken
  5. 5 http://t3n.me/SafariDevlib
    Safari Developer Library
  6. 6 http://t3n.me/TextOutline
    Outline über text-shadow
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich CSS
CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Modul
CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Modul

Mit CSS-Shapes wird es Webworkern in Zukunft möglich sein, Texte um Objekte fließen zu lassen wie in einem Satzprogramm. Wir verraten, wie CSS-Shapes funktionieren und wie du sie einsetzen kannst. » weiterlesen

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik
CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik

Google- und Opera-Entwickler sehen keine Zukunft für CSS-Regions in der Blink-Engine. Bei Google sieht man in der Unterstützung vor allem ein Performance-Hindernis. » weiterlesen

Twitter Mobile UX: So adaptierst du die Slider-Animation fürs Web
Twitter Mobile UX: So adaptierst du die Slider-Animation fürs Web

Twitter präsentiert die Kurzbiographie der Benutzer mobil so einfach wie genial. Auf engstem Raum werden zwei Bilder, Links und Text geliefert. In diesem Artikel lest ihr, wie ihr dieses Pattern … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen