CSS Masks

[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