Friday, April 25th, 2008

WebKit keeps going with CSS Masks

Category: Browsers, WebKit

CSS Masks

Wow, get the feeling that they are on a roll with taking Canvas / SVG like use cases, generalizing them, and making them available to people as simple CSS.

First we had CSS animations, and we are now going with CSS Masks which run across images and <video> elements:

WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.

You now have all of these to work with:

-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)

The image at the top of the post is made via:

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

And we will now see even more rounded corners:

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

You can even use SVG as an image input:

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

This is huge. Web 3.0 will surely be about going beyond big fonts and rounded corners, and will go towards using the same killer masks ;)

Posted by Dion Almaer at 1:22 am

4.1 rating from 22 votes


Comments feed TrackBack URI

Very cool, I hope CSS Variables are next:

Comment by Dylan Schiemann — April 25, 2008

Very useful, seeing as this would serve as an exellent way to incorporate picture frames and the like to graphics without the need to introduce specialized markup for the design. It’s my profound belief that structure and design should be separate.

Comment by Andy — April 25, 2008

For the sake of the web and its future: this should be a showcase and not be taken into production. Please think about Webstandards, bitte.

Comment by ronselling — April 25, 2008

As much as I like this as a showcase of where things should be heading, I don’t see the value in this to the developer – being Webkit specific, there are very few instances where this would be practical (Adobe AIR, iPhone apps perhaps?).

Comment by ckorhonen — April 25, 2008

@ronselling, ckorhonen: Like Dave Hyatt stated, these will be proposed to CSS.

Comment by Andy — April 25, 2008

I understand that, but we all know the lag between proposal and mainstream implementation.

Don’t get me wrong, we are going in the right direction, but we are at least a few years away from the point where we can use this kind of thing as standard in our code.

Comment by ckorhonen — April 25, 2008

I think that most of us are aware of that but it’s thanks to showcases like this that makes the web evolve.

Comment by Andy — April 25, 2008

These things always end up implemented in one browser or another.

Then people complain about IE or Firefox not implementing this vendor-specific stuff.

Then people complain about lack of adherence to web standards.

Comment by Eric the .5b — April 25, 2008

Leave a comment

You must be logged in to post a comment.