| layout | page |
|---|---|
| title | Masking |
| categories | project |
| description | Clip content with custom shapes and soft edges. |
| thumb | project_header/icon-masking.svg |
| full_image | project_header/icon-masking.svg |
| bg | 445a79 |
| permalink | masking |
#Masking
##What is it?
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. Masking is similar to clipping in that they are both used to define what is visible. Masking uses an image for this and clipping uses shapes.
Masking example on CodePen from Ludvig Lindblom
The Adobe Web Platform team is contributing to the CSS Masking Module Level 1{:target="_blank"} specification, which aims to bring masking and clipping to the HTML world.
##When can I use it?
{% assign browser_support = site.data.browser_support.mask %} {% include browser-support.html %}
Now in Chrome, Firefox and Safari. For a view of current and upcoming browser support, check out caniuse.com{:target="_blank"}.
##Where can I learn more?
Razvan Caliman{:target="_blank"} provides a clear distinction between masking and clipping in his Intro to CSS Masking{:target="_blank"} video. In it, he points to an article by Dirk Schulze{:target="_blank"}: CSS Masking{:target="_blank"}.
Also of interest:
- CSS Masking on CodePen{:target="_blank"}
- Making the Web Sweeter with Food Network and Cupcakes by CJ Gammon{:target="_blank"} goes over techniques used and provides the demo source