Clipping & Masking

#Clipping & Masking

##What is it?

Clipping takes a region of an element and prevents rendering - the element gets “clipped.” Masking is using an image as coverage over an element, affecting the alpha channel of the element. Portions of a masked element are fully or partially transparent, and so the effect really comes from a combination of an element and the masking image.

Clipping & Masking — The Food Network's Cupcakes! app makes liberal use of of clipping and masking to create beautiful and engaging user experience.

The Adobe Web Platform team is contributing to the CSS Masking Module Level 1 specification, which aims to bring these two operations to the HTML world.

##When can I use it?

Now in Chrome, Firefox and Safari. For a view of current and upcoming browser support, check out caniuse.com.

##Where can I learn more?

Razvan Caliman provides a clear distinction between masking and clipping in his Intro to CSS Masking video. In it, he points to an article by Dirk Schulze: CSS Masking.

Also of interest:

Clipping in CSS and SVG by Sara Soueidan
CSS Clipping on CodePen
CSS Masking on CodePen
Making the Web Sweeter with Food Network and Cupcakes by CJ Gammon goes over techniques used and provides the demo source