# Baroquest
Framework

Masquerade deals with elements that utilize the mask CSS property to blend elements together in creative ways.

### Masks

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:

#### .bubble

#### .columnal

#### .quatrefoil

#### .roman

#### .scallop

#### .spiked

#### .squeeze

#### .waves

#### .rhombic

#### .xor

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

#### Example: .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.

### Mixers

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.

#### Example: .mask.bubble.large.mix-multiply

Social
Butterfly

### Masked Text

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:

#### Masked Text

### Examples

Let's take a look at some examples using combined elements.

#### Example 1: Maskception (Nested Masks)

In this example, we have masked text nested within a patterned mask, which is nested within a wallpapered mask.

### Bradley

#### Example 2: Nested Masks w/ Mixing

In this example, we apply some mixer classes to nested masks.

#### Example 3: Using a Pattern as a Mask

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.