🤑 Join the Treehouse affiliate program and earn 25% recurring commission!

New No-Code Track! 🚀start learning today!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

✨ Earn college credits in Cybersecurity, JS, HTML, CSS and Python

Well done!

You have completed CSS Masks!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse

CSS Masks

8:11 with Guil Hernandez

Masking is a commonly used feature in graphics editing tools like Photoshop and Sketch; we use it to hide parts of an element. But now, we're able to apply masks directly in the browser, with CSS!

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Fork this workspace to follow along.

Quick Reference

CSS Clipping Paths

Browser Support

CSS Masks

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

[MUSIC] 0:00

Hey everyone, Guil here. 0:04

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

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

Photoshop and Sketch. 0:16

We use them to hide visual parts of an element. 0:17

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

This can create a lot of interesting design effects, so 0:25

let's take a look at a few. 0:28

Masking is part of the CSS masking specification, 0:30

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

And those methods are masking and clipping. 0:39

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

With the CSS masking feature, 0:46

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

So, here I have a webpage with a nice background image 0:52

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

And if we take a look at the markup for 1:01

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

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

look like it's behind the mountains. 1:12

Sounds pretty neat right? 1:15

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

to filter the visual portions of the element. 1:20

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

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

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

the bottom portion is completely transparent. 1:36

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

The less opaque a portion of the mask image is, 1:41

the less visible the element will be at that position. 1:45

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

mountain portions and saving it as a PNG. 1:53

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

our main background image, notice how the transparent portions follow 2:02

the exact shape of the mountains in the main background image. 2:07

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

The white areas indicate full transparency, 2:13

while the black area indicates fully opaque. 2:17

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

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

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

And we'll see how that works next. 2:35

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

So, let's see how mask image works 2:42

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

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

I'm going to add a mass image property. 2:52

And since I'm using Chrome, 2:56

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

So as the mask image property, 3:05

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

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

parenthesis. 3:16

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

So the file name for that is mask.png. 3:21

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

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

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

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

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

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

opaque area of the alpha mask. 3:56

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

range area in the background image. 4:04

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

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

So right beneath the mask image declarations, 4:16

I'm going to add a padding property. 4:21

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

bottom padding to zero, and the left padding to 120 pixels. 4:28

All right, so let's take a look. 4:32

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

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

masking the bottom parts of our text. 4:45

Pretty awesome. 4:48

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

here is because this particular mask image needs to be 4:54

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

They need to be aligned in our webpage so 5:03

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

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

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

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

notice how the entire mask image gets repositioned with the content. 5:27

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

actually pushes everything down. 5:36

So I'll set it back to padding. 5:38

Refresh. 5:41

And now we're all good again. 5:42

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

adding texture effects to elements. 5:48

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

And the textured background will show through the text. 5:55

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

in our main heading, once again. 6:02

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

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

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

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

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

So back at my style sheet, in the h1 rule, 6:29

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

I'm going to replace mask.png with texture.png. 6:37

And I'll do the same in the unprefixed declaration. 6:42

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

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

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

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

So now parts of the sky background are actually showing through 7:06

the textured transparent bits of our mask. 7:09

Pretty neat. 7:13

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

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

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

properties and only when using the webkit vendor prefix. 7:27

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

Firefox has only partial support for masking. 7:34

It only supports inline SVG masks. 7:38

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

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

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

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

maybe every browser will be supporting masks. 7:55

CSS masks are fun and visually interesting, so 7:59

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

And if you come up with anything awesome, 8:05

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

Thanks, everyone. 8:10

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up