CSS3 Click Chart

common stuff
cutting-edge

Masks

Allows you to define an alpha mask to overlay content to knock out portions of the content, thus allowing the clipping of content with complex shapes.

Specification

* Not in the spec

Example Code

.element {
    background: url(../images/compass.png);
    -webkit-mask-image: -webkit-linear-gradient(black 0%, black 9%, transparent 10%, transparent 19%, black 20%, black 29%, transparent 30%, transparent 39%, black 40%, black 49%, transparent 50%, transparent 59%, black 60%, black 69%, transparent 70%, transparent 79%, black 80%, black 89%, transparent 90%, transparent 99%, black 100%);
}

Live Demonstration

The image below has been partially masked with a staggered transparent gradient.

Desktop Browser Support

Standard Syntax:
No support.

Vendor Syntax:
Chrome 4+, Safari 4+

Tools / Polyfills

Tutorials / Articles

CSS Mask-Image & Text by Trent Walton
CSS Masks on WebKit blog