Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

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!

[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