CSS WebKit: Features CSS-Maskierungen

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.

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.

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.

 

 

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.

MORE HIER: http://t3n.de/magazin/webstandards-aktuell-css-versuche-webkit-230381/