Sep
20
2010

Quick Demo: Webkit CSS3 Mask with SVG

By Tomomi Imura  //  CSS, Dev, Sandbox, WebKit  //  8 Comments

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

Tags: ,

Author: Tomomi Imura

Short story: keeping my website since 1996, finally started this blog in 2007. Long story: see "About" page!

Tomomi Imura has written 87 articles for us.

8 Comments to “Quick Demo: Webkit CSS3 Mask with SVG”

  • Rik September 29, 2010 at 1:51 pm

    I’m glad this kind of usage starts to get some tutorials.

    Two comments though:
    - This is not CSS3 at all. It’s using the CSS syntax but there’s no draft or proposal (that I know of).
    - As you mention in the demo itsel, Firefox has a similar features by applying SVG masks on HTML content (https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content). I think you can provide one SVG file that is both good for WebKit and Gecko by using the element. And I think this feature has been proposed to the W3C.

  • Lesetipps zum Donnerstag: CDN, Masks und die Optimierung zum Milliardär at webCONSUL September 30, 2010 at 1:45 am

    [...] gibt es ein Beispiel zu einer SVG Maske in Webkit um über den Webbrowser Bilder mit Masken zu versehen. Das gibt der ganzen Geschichte mehr Dynamik [...]

  • Steve Ottenad October 13, 2010 at 3:37 pm

    Hmm, its looking like chrome (at least Chrome 6) is not supported. Very interesting find though.

  • thanos p November 18, 2010 at 1:05 pm

    very interesting site – at least for a beginner like me, i’ve bookmarked. Keep on writing, let us learning :)

    As for the above, im wondering if i can make the mask move with the pointer – trying this aou is a good way to learn

  • Efrain Alexandre May 21, 2012 at 12:52 pm

    I really like your wordpress theme, exactly where do you down load it through?

  • admin May 30, 2012 at 8:34 pm

    Efrain,
    I got from http://www.site5.com/wordpress-themes/

  • Tomomi Imura December 18, 2012 at 11:45 am

    Wow, this post now does seem old!!! webOS 2.0!? HTML5 buzz!? oh my.
    Anyway, after 2+ years, now the CSS Masking is on Working draft on W3C! http://www.w3.org/TR/css-masking/

Leave a comment