As far as CSS features go this is still relatively new. Because of this, support can be spotty.
So let’s check out caniuse.com.
Caniuse is a website created by a friend of mine Alexis Diveria, that shows you what features are supported on which browser versions.
Today the only solid CSS implementation is in webkit, so we’re going to focus on this.
We’re going to cover basic masks in CSS and how you can use them.
Then get into some more advanced CSS masking features and what they enable.
Masking in the webkit implementation uses the webkit prefix for all it’s properties.
CSS Masking is very similar to CSS backgrounds, it as a shorthand as well as independent properties that can be applied like repeat or sizing.
The mask image property is a CSS image just like background images so it can be any type of image supported by CSS like a url image or a CSS gradient.
Masking in webkit uses an inverted luminance mask so we can create this in photoshop.
We can then apply this to any HTML content, like text in CSS.
The nice thing about using masking in CSS rather than layering images is that you can change the mask based on media queries or animate content inside the masked element.
The shorthand for masking is:
-webkit-mask: url(../path/to/image);And the detailed properties are:
-webkit-mask-image: url(../path/to/image);
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;There’s also a composite property which we’ll discuss further later. Using these properties you essentially have the same level of control over your mask as you would any background image applied to a CSS element.
Clip Paths
Clip paths are another way to manipulate the transparent portions of content but rather than using an image, they use a CSS shape.
CSS shapes are vector shapes defined in CSS, these can be created by hand knowing the proper syntax or using a tool like clippy.
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);Clip paths are neat because they allow you to create more interesting shapes than rectangles or rounded rectangles, but also because you can animate the shape from one to another using CSS transitions.
Compositing
Because CSS masking is based off of CSS backgrounds it also supports multiple mask images. This is where compositing comes in. The mask composite property allows you to adjust how the different mask image layers affect the transparency of the previous layers.
-webkit-mask-composite: source-over;It takes a number of values and these all manipulate the resulting output in a variety of ways. The default value is source-over, meaning the source mask image (next layer) is rendered over the destination mask image (previous layer). This basically adds any subsequent images to your mask. The current compositing values supported by webkit are as follows:
- clear
Overlapping pixels in the source mask image and the destination mask image are cleared. - copy
The source mask image replaces the destination mask image. - source-over
The source mask image is rendered over the destination mask image. - source-in
Overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mask image; all other pixels are cleared. - source-out
Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered. - source-atop
The pixels of the destination mask image are rendered. The pixels of the source mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the source mask image to have no effect. - destination-over
The destination mask image is rendered over the source mask image. - destination-in
Overlapping pixels in the source mask image and the destination mask image remain the pixels of the destination mask image; all other pixels are cleared. - destination-out
Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered. - destination-atop
The pixels of the source mask image are rendered. The pixels of the destination mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the destination mask image to have no effect. - xor
Overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque.
However these are specific to the webkit implementation and the W3C specification currently lists different naming conventions for it’s values. The values listed by the W3C are below, with the webkit values they map to in parentheses:
- add (source-over)
The mask image layer closer to the user is placed above the next mask image layer. - subtract (source-out)
The mask image layer closer to the user is placed where it falls outside of the next mask image layer. - intersect (source-in)
The parts of the mask image layer closer to the user that overlap the next mask image layer replace the parts of the next mask image layer. - exclude (xor)
The non-overlaping parts of the mask image layer closer to the user and the next mask image layer are combined.
Using multiple mask layers and compositing can provide some very interesting results. Particularly when you combine them with mask position and animate individual layers based on interaction.
Masks are a great way to leverage transparency on your designs in a more powerful way.