Friday, April 25th, 2008
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 ;)
Posted by Dion Almaer at 1:22 am