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
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!
Fork this workspace to follow along.
Quick Reference
- CSS Masking - html5rocks.com
- CSS Masking Specification
- Clipping and Masking in CSS
- -webkit-mask-image
Related Workshops
Browser Support
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up