CSS Masking - mask

Hello there, future CSS masters! Today, we're going to dive into the fascinating world of CSS masking. Imagine you're a magician, and you want to make parts of your webpage disappear or reveal them in interesting ways. That's exactly what CSS masking allows us to do! So, let's put on our magician's hat and learn some CSS tricks!

What is CSS Masking?

CSS masking is like using an invisible stencil on your web elements. It allows you to hide or partially show parts of an element based on another image or shape. It's a powerful technique that can create some really cool effects!

Possible Values

Before we start coding, let's look at the different values we can use with the mask property. Think of these as different types of magic wands, each creating a unique effect:

Value	Description
none	No masking is applied
<mask-reference>	Refers to a mask image
<masking-mode>	Determines how the mask is applied
<position>	Sets the position of the mask
<bg-size>	Defines the size of the mask
<repeat-style>	Specifies how the mask repeats
<geometry-box>	Defines the mask box
no-clip	Prevents clipping of the mask

Don't worry if these seem confusing now. We'll explore each one with examples!

Applies to

The mask property can be applied to any element. It's like having a magic wand that works on everything!

Syntax

The basic syntax for the mask property looks like this:

.element {
  mask: <value>;
}

Now, let's look at each value in detail.

CSS mask - none Value

The none value is straightforward. It means no masking is applied. It's like deciding not to use your magic wand at all.

.no-mask {
  mask: none;
}

This code simply tells the browser, "Don't apply any mask to this element."

CSS mask - <mask-reference>

This is where the real magic begins! A <mask-reference> can be an image or a CSS gradient that defines which parts of the element should be visible.

.image-mask {
  mask-image: url('mask.png');
  mask: url('mask.png');
}

.gradient-mask {
  mask-image: linear-gradient(to right, transparent, black);
  mask: linear-gradient(to right, transparent, black);
}

In these examples, we're using either an image file ('mask.png') or a linear gradient as our mask. The black parts of the mask will show the element, while transparent parts will hide it.

CSS mask - <masking-mode>

The masking mode determines how the mask is applied. There are two values: alpha and luminance.

.alpha-mask {
  mask-mode: alpha;
}

.luminance-mask {
  mask-mode: luminance;
}

• alpha: Uses the alpha channel of the mask image.
• luminance: Uses the luminance (brightness) of the mask image.

CSS mask - <position>

Just like with background images, you can position your mask:

.positioned-mask {
  mask-position: center;
  /* or */
  mask: url('mask.png') center;
}

This centers the mask on the element. You can use any valid CSS position value here.

CSS mask - <bg-size>

You can also control the size of your mask:

.sized-mask {
  mask-size: cover;
  /* or */
  mask: url('mask.png') cover;
}

This makes the mask cover the entire element. You can use specific dimensions too, like 100px 200px.

CSS mask - <repeat-style>

If your mask is smaller than the element, you can control how it repeats:

.repeating-mask {
  mask-repeat: repeat-x;
  /* or */
  mask: url('mask.png') repeat-x;
}

This repeats the mask horizontally across the element.

CSS mask - <geometry-box>

The geometry box defines the area that the mask covers:

.box-mask {
  mask-clip: padding-box;
  /* or */
  mask: url('mask.png') padding-box;
}

This applies the mask to the padding box of the element.

CSS mask - <geometry-box> | no-clip

The no-clip value prevents the mask from being clipped to the element's boundaries:

.no-clip-mask {
  mask-clip: no-clip;
  /* or */
  mask: url('mask.png') no-clip;
}

This allows the mask to extend beyond the element's boundaries.

CSS mask - Related Properties

There are several properties related to mask that give you even more control:

Property	Description
mask-image	Specifies the mask image
mask-mode	Sets the masking mode
mask-repeat	Controls how the mask repeats
mask-position	Sets the position of the mask
mask-clip	Determines the mask's painting area
mask-origin	Sets the origin of the mask
mask-size	Specifies the size of the mask
mask-composite	Defines how masks are combined

Each of these properties corresponds to a part of the shorthand mask property we've been using.

And there you have it, my young CSS wizards! You've just learned the basics of CSS masking. Remember, like any magic trick, mastering CSS masking takes practice. So don't be afraid to experiment and create your own magical web designs!

In my years of teaching, I've found that the best way to learn is by doing. So here's a fun exercise for you: try creating a "reveal" effect on an image using a gradient mask. Make it so that when you hover over the image, it's fully revealed. It's like pulling back a curtain to show a hidden picture!

Happy coding, and may your masks always fit perfectly!

Credits: Image by storyset