Ajaxschmiede.de

Wie die Entwickler des WebKit-Browsers in ihrem Blog berichten, unterstützt ihr Schützling ab sofort CSS-Masken, mit denen sich sehr coole Effekte erzeugen lassen. Möglich wird dies durch die folgenden, neu eingeführten CSS-Eigenschaften:

• -webkit-mask (background)
• -webkit-mask-attachment (background-attachment)
• -webkit-mask-clip (background-clip)
• -webkit-mask-origin (background-origin)
• -webkit-mask-image (background-image)
• -webkit-mask-repeat (background-repeat)
• -webkit-mask-composite (background-composite)
• -webkit-mask-box-image (border-image)

Mit den CSS-Masken ergeben sich interessante Möglichkeiten um Überblendeffekte zu erstellen. So kann man beispielsweise ein Bild mit einem weichen Übergang zum Hintergrund erschaffen, indem man dem Bild eine Maskengrafik erweist. Der Quellcode dafür sieht wie folgt aus:

<img src=”kate.png” style=”-webkit-mask-box-image: url(mask.png) 75 stretch;” />

Des weiteren ist ebenso gut möglich, die vor kurzem vorgestellten Gradienten als Maskengrafik zu verwenden um Verläufe zu erzeugen. Der Code hierfür lautet:

<img src=”kate.png” style=”-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1), to(rgba(0,0,0,0))” />

Auch svg-Grafiken eigenen sich als Grundlage für CSS-Masken. Dafür wird folgende Syntax angewandt:

<img src=”kate.png” style=”-webkit-mask-image: url(circle.svg)” />

WebKit stellt die Mittel zur Verfügung, es liegt an uns Webentwicklern die Chancen zu erkennen und die neuen Funktionen zu verwenden.

Ich bezweifle jedoch, dass sich die hier vorgestellten Masken in dieser Form mittelfristig durchsetzen werden, da sie erst in zukünftigen CSS-Definitionen Einzug halten. Es wird noch etliche Zeit dauern bis CSS-Masken auch von den „gewöhnlichen“ Browsern, zu denen ich WebKit nicht zähle, unterstützt werden.