Tomomi Imura

Tomomi Imura

An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer.

Twitter LinkedIn Instagram Github Flickr

Creative Commons License
My articles are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

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, -webkit-mask.

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

.avatar {
  -webkit-mask-box-image: url(twitter-bird.svg);
}

I used 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).

Reference

Surfin’ Safari (webkit.org): CSS Masks

comments powered by