Anzeige
Anzeige
UX & Design

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

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.

4 Min.
Artikel merken
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
Original und gedrehte Bilder um die X- bzw. Z-Achse.
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.

„transform-style“ und „perspective“ sorgen für einen „echten“ 3D-Effekt.
„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.

Anzeige
Anzeige
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.

Ist die Maske kleiner als das Element, wird sie gekachelt.
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.

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

Listing 3

Original, Maske und Ergebnis mit mask-box-image.
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.

Maske mit Verläufen.
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 WebKit eine eigene Syntax.

Gespiegelte Elemente einfach per CSS 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.

Anzeige
Anzeige
Outlines in WebKit mit text-stroke.
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.

Anzeige
Anzeige
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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige