Friday, April 25th, 2008
WebKit keeps going with CSS Masks
<p>
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:
-
-
<img src=â€kate.png†style=â€-webkit-mask-box-image: url(mask.png) 75 stretch;â€/>
-
And we will now see even more rounded corners:
-
-
<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:
-
-
<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 ;)
Related Content:
Very cool, I hope CSS Variables are next: http://disruptive-innovations.com/zoo/cssvariables/
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.
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.
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?).
@ronselling, ckorhonen: Like Dave Hyatt stated, these will be proposed to CSS.
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.
I think that most of us are aware of that but it’s thanks to showcases like this that makes the web evolve.
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.