[MUSIC]

Hey everyone, Guil here.

In this workshop, we're gonna cover an exciting CSS design effect: CSS masks.

So, masking and clipping are commonly used features in graphic editing tools like

Photoshop and Sketch.

We use them to hide visual parts of an element.

But now we're able to apply masks directly in the browser with CSS.

This can create a lot of interesting design effects, so

let's take a look at a few.

Masking is part of the CSS masking specification,

which provides two methods for partially or fully hiding portions of HTML elements.

And those methods are masking and clipping.

So, we're gonna focus on masking in this workshop.

With the CSS masking feature,

we can obscure portions of an element by masking out certain areas.

So, here I have a webpage with a nice background image

of a snow-capped mountain range, with the headline, Poly in front of it.

And if we take a look at the markup for

that, we can see that it's an h1 element nested inside a div.

So what I'm going to do is use a mask to make parts of this text

look like it's behind the mountains.

Sounds pretty neat right?

So when masking an element you need to use a mask image

to filter the visual portions of the element.

So for this project I have a file named mask.png and

this is the file that will serve as our mask image.

So when I preview the image notice how the top portion is completely black and

the bottom portion is completely transparent.

This particular mask is what's called an Alpha Mask.

The less opaque a portion of the mask image is,

the less visible the element will be at that position.

And I created this mask image in Photoshop by masking out the bottom

mountain portions and saving it as a PNG.

Now, if I compare this mask image to the mountains.JPEG image,

our main background image, notice how the transparent portions follow

the exact shape of the mountains in the main background image.

So, this is the part I want to mask out.

The white areas indicate full transparency,

while the black area indicates fully opaque.

All right, so now I can use this mask image on any element to create a masking

effect that shows any part of an element positioned over this black opaque area.

And it will hide the parts positioned over the white transparent areas.

And we'll see how that works next.

So, you apply masks with CSS using the mask image property.

So, let's see how mask image works

by applying the alpha mask as a background to the h1 element.

So, I'm gonna scroll down to the h1 rule, and

I'm going to add a mass image property.

And since I'm using Chrome,

I'll need to use the webkit vendor prefix for mask image.

So as the mask image property,

we can use the same URL function we use when applying a background image.

So I'm going to write the URL function by typing url followed by a set of

parenthesis.

And inside the parenthesis I'm going to define that mask image.

So the file name for that is mask.png.

So I wrote the mask image declaration for all the webkit based browsers, but

as good practice I'm also going to include the un-prefixed declaration.

So I'm going to copy this, paste it below, and remove the webkit vendor prefix.

All right so now when I save the style sheet and refresh the page

the mask image is now in place but, we're not seeing any masking just yet.

Well, that's because the heading is still positioned within the visible or

opaque area of the alpha mask.

Because remember I want to mask the heading if its position over this mountain

range area in the background image.

So I'm going to go back to the style sheet and in the h1 rule I'm going

to position the h1 behind that mountain region with a little extra padding.

So right beneath the mask image declarations,

I'm going to add a padding property.

And I'll set the top padding to 260 pixels, the right and

bottom padding to zero, and the left padding to 120 pixels.

All right, so let's take a look.

I'll save the style sheet and once I refresh the page, notice how when we

move it down with padding, we're able to see the mountaintops covering or

masking the bottom parts of our text.

Pretty awesome.

So now if you're wondering why I used padding, well the reason I used padding

here is because this particular mask image needs to be

positioned in a way that matches the positioning of the main background image.

They need to be aligned in our webpage so

using padding keeps the h1 and masked image in place and aligned with

the background image while only moving the content area as you can see here.

So, for example, if I used margins or positioning instead, so

let's use margins, once I take a look at our web page,

notice how the entire mask image gets repositioned with the content.

So with margins, it no longer matches up with the background image it

actually pushes everything down.

So I'll set it back to padding.

Refresh.

And now we're all good again.

Now what's also fascinating is that we're able to use this masking feature for

adding texture effects to elements.

So we can apply a textured mask image to text, for example.

And the textured background will show through the text.

So, let me show you how to use these texture effects

in our main heading, once again.

So, back in my project files, if I preview the texture.png image,

we're able to see the texture mask we're going to apply to the heading.

So, like the mask I just used, this mask has partial and full

transparent areas that will allow parts of the h1's background to show through.

And it also has fully opaque areas that will keep parts of the text visible.

So back at my style sheet, in the h1 rule,

I'm going to apply the texture mask as the new mask image so

I'm going to replace mask.png with texture.png.

And I'll do the same in the unprefixed declaration.

And let me also change the padding a bit so we're able to see this a little better.

So instead of 260 pixels I'm going to change it to 100 pixels.

All right, so now when I save my style sheet and

refresh the page, now we're able to see the texture mask applied to the H1.

So now parts of the sky background are actually showing through

the textured transparent bits of our mask.

Pretty neat.

So as we learned, CSS masks are a handy and flexible design feature

we can use to enhance headlines, buttons, icons or any part of our website.

As I'm recording this video, only Chrome and Safari support the mask image

properties and only when using the webkit vendor prefix.

Internet Explorer doesn't support the mask image property at all and

Firefox has only partial support for masking.

It only supports inline SVG masks.

Now, I didn't cover inline SVG mask in this workshop, but

check the teacher's notes for more information on those.

And you can always check caniuse.com to see the current support for

CSS features in all the browsers, because by the time you're watching this video,

maybe every browser will be supporting masks.

CSS masks are fun and visually interesting, so

I encourage each of you to experiment and find creative ways to use them.

And if you come up with anything awesome,

don't forget to share it with us here at Treehouse.

Thanks, everyone.