CSS Masks

03 Apr 2013

Quite a while ago, I read an article on CSS Masks. I bookmarked it back then, and rediscovered it recently. I got excited by the article and came up with some small cases of my own.
Unfortunately the current implementation of CSS Masks is only included within webkit, as can be seen on caniuse.com. Checkout a couple of examples (on a webkit browser, including iphone!) using the link below.

View demo

Instead of explaining it all myself, I'll simply share the page where I learned how to use them. It explains a couple of different techniques covering: SVG, Gradients and Cross-browser masks. The demo page I've created uses the relatively simple CSS implementation with a webkit prefix.