Quick Demo: Webkit CSS3 Mask with SVG
I haven’t got a chance to create the apps and demos I’ve been thinking because my day job at Palm has kept me really busy. (Yeah, we’re shipping webOS 2.0 pretty soon!)
So instead of writing a new material, I decided to post the stuff I was testing around a while ago because SVG seems to be a hot topic since the HTML5 buzz!
This is an example of CSS mask with SVG. -The CSS alpha mask is introduced by Webkit.org back in 2008.
And this image at the right is a screen capture from WebKit Nightly browser. The photo I use here is a Twitter avatar photo of @sockington, masked with an SVG file (I used the vector image created by eagl0r on DeviantArt and converted it as as SVG with Adobe Illustrator) with using Webkit-only CSS 3 property,
The actual demo is here.
This works only on advanced webkit-browsers with SVG support, such as Safari 4+ and Chrome 2+ (not sure. I need to check). Android webkit browsers currently do not support SVG.
For non-supporting browsers, you should just see three rectangle pictures as fallback. Nothing should look broken.
The code is Simple
<img class="avatar" src="avatar-pic.png">
mask-box-image instead of
mask-image to make the mask stretch to fit with various image sizes and aspect ratio.
mask-image repeats the mask images as patterns (also you can specify the type of repeat, and position etc. I am not going to talk about them here but you can read on the reference link below).
Surfin’ Safari (webkit.org): CSS Masks
comments powered by