Masquerade deals with elements that utilize the mask CSS property to blend elements together in creative ways.
SOURCE: css/masks.css
Masks are shape elements that use the mask CSS property. By default, they use the --accent variable for the background color. Apply the class .mask in conjunction with any of the following mask shape classes:
SIZING.
By default, masks are contained within their element. However, we can add any of the following classes to adjust the mask size:
.covered - adjusts to cover entire container
.filled - 100% of container
.xlarge - 85% of container
.large - 75% of container
.medium - 50% of container
.small - 25% of container
.tiny - 1/6th of container
REPEATING.
We can also repeat a mask within it's container. Simply add the class .repeated.
For example, let's say we want to tile a "bubble" mask at one-fourth (25%) of the size of the container. Our masked element should have following classes:
.mask.bubble.repeated.small
In this example, we are placing a small repeated bubble mask with a third-width box that has an ornate wallpaper.
Like a social chameleon, we can blend our masks into the background by applying some classy blend-mode classes:
.unmix - removes mix-blend*
.mix-multiply - multiply blend mode*
.mix-color - color blend mode*
.mix-color-burn - color-burn blend mode
.mix-color-dodge - color-dodge blend mode*
.mix-difference - difference blend mode
.mix-exclusion - exclusion blend mode
.mix-hue - hue blend mode
.mix-luminosity - luminosity blend mode*
.mix-lighten - lighten blend mode*
.mix-darken - darken blend mode*
.mix-overlay - overlay blend mode*
.mix-saturation - saturation blend mode
.mix-screen - screen blend mode*
* - denotes classes that also applies a background-blend-mode property.
In the following example, we apply a multiply mix. The mixed mask blends with the parent container's background, which uses a tiled pattern.
We can "mask" text to make it take on a background image. This is useful if we want to add texture and depth to text headings. Simply apply the class .mask-text to any text element!
Below are some examples using wallpapers:
Let's take a look at some examples using combined elements.
In this example, we have masked text nested within a patterned mask, which is nested within a wallpapered mask.
In this example, we apply some mixer classes to nested masks.
Pattern use transparent PNG images, so we could use these as masks. Use the following CSS to set the mask style:
.custom-pattern-mask {
--webkit-mask-image: url('css/images/patterns/filename.png');
mask-image: url('css/images/patterns/filename.png');
mask-repeat: repeat;
mask-size: 25%;
}
In this example, we set the mask-size to 25%, repeated, with a tiled wallpaper.