CSS Clipping Paths

[MUSIC] 0:00 Hey everyone, Guil here. 0:04 And in this workshop, 0:06 we're going to learn about an advanced CSS feature called clipping paths. 0:07 Clipping is a long-time feature of graphic design that's used to partially or 0:11 fully hide parts of a design element. 0:15 And, CSS has a clip path property. 0:18 That lets us clip portions of any HTML element. 0:21 But the concept of clipping isn't entirely new to CSS. 0:24 You see, a clip property was first introduced in CSS 2.1 to define 0:27 the visible portions of an element, but the purpose of that clip property was for 0:31 rectangular shapes and it only worked with absolutely positioned elements. 0:36 It wasn't all that flexible. 0:40 So that might be why the clip property is now deprecated in favor of the new clip 0:42 path feature. 0:47 With the clip path property, we're not limited to rectangular clipping paths. 0:48 We're able to draw clipping regions with basic shapes, 0:52 polygon points or SVG elements so let's take a look at some examples. 0:55 The clipping feature is also part of the CSS masking specification, which gives us 1:00 two methods for partially of fully heading portions of html elements and 1:05 those methods are clipping and masking. 1:09 Now I teach how masking works in a related workshop. 1:11 So check out the teachers notes for a link to that particular workshop. 1:14 And in this workshop, we're gonna experiment with clipping. 1:18 Similar to the alpha and luminance CSS mask I covered in a related workshop, we 1:22 can use the clip-path property to describe the visible regions of an element. 1:27 And we draw those regions as paths using basic shapes, polygon points, 1:32 or SVG elements. 1:37 Then, anything outside that drawn region, is not rendered in the browser. 1:38 So let's first take a look at a few examples of using clip path 1:42 with basic shape functions. 1:46 So I'm gonna head over to an awesome clip path maker called clippy, 1:47 created by Bennett Feeley. 1:53 Now, this is a great tool for creating clip path shapes or 1:55 simply experimenting with some of the things you can do with clipping paths So 1:59 for example here we're making a triangle polygon. 2:03 But if we go over here to a right side bar and 2:06 click on the circle shape, we can see how parts of the background become hidden or 2:08 clipped to reveal a circular background image. 2:13 And notice the CSS it writes at the bottom of the page here. 2:17 And these are the styles we can use in our CSS. 2:20 And we get a similar result with another shape. 2:23 So for instance if I click the ellipse shape 2:25 then we get an elliptical shaped background image, and so forth. 2:28 So this is all being done via the clip path property we see here. 2:31 Which, as we can see, works a lot like the mask image property. 2:36 Now, the difference is, clip path is entirely flexible 2:41 since we're able to adjust the clipping path directly in the CSS. 2:44 So, each set of comma separated numbers here represents a clip path point. 2:48 With clipping path, the polygon function is the most complex clip path function. 2:54 So we use it for drawing more complex shapes. 3:00 For instance, if I click on the hexagon shape, 3:02 it creates six points to render the background image as a hexagon. 3:05 And the same happens if I click on the pentagon shape, 3:09 the right arrow shape and so on. 3:13 So now if I copy the code at the bottom of the page here, 3:15 and go back to my project files, and in the stylesheet 3:20 if I paste that generated CSS inside the wrap rule. 3:25 Once I save my style sheet and preview the webpage, 3:29 notice how everything in the wrap element is no longer rendered by the browser. 3:32 Parts of the wrap element are now clipped to 3:38 render an arrow shaped background image. 3:40 Pretty neat. 3:43 We're also able to create some neat masking effects 3:44 with the clip path property. 3:47 So I'm going to go back to the stylesheet and 3:49 undo the clip path properties I just paste in. 3:52 Now I'm going to create a clipping mask that will clip parts of text, 3:55 if its positioned in front of this boat image. 4:00 That way it will appear as if the text is behind the boat. 4:03 So, again, instead of having to figure out all the polygon points ourselves then 4:07 writing the points in the style sheet, we can use the clipping tool or, 4:11 I like to use another great clip path generator tool created by cssplant.com. 4:17 So first I'm going to drag the boat.jpg background image 4:23 inside this mask generator. 4:27 So there it is, it's all set up. 4:30 And next I'll need to draw the masking region I want. 4:33 So I'm going to select the Polygon Lasso tool here. 4:36 And just start clicking in the areas where I wanna draw that clipping region. 4:40 So I'm gonna start up here at the top of the boat and create a few points. 4:45 [BLANK_AUDIO] 4:51 All right so this is the clipping region, and 5:09 now everything inside this region will be allowed to show through, 5:12 while everything outside will be clipped out and will not appear as part of 5:17 the background image, as we're seeing here in the clip path generator preview. 5:21 So, I want the clipping mask as part of the h1. 5:28 So, in the clip half generator I'm going to scroll down and 5:32 copy the CSS code provided by the generator, then paste it in the h1 rule. 5:37 So, right here under the comment for Chrome and Safari, let's start here. 5:42 I'm going to copy this web kit clip path Declaration and 5:47 go back to my style sheet and paste it inside the h1 rule. 5:52 [BLANK_AUDIO] 5:57 So as I'm making this video, right now we'll need to use the web kit prefix 6:03 to support the latest version of Chrome, Safari, and Opera. 6:08 But as you're watching this things may have changed so check an online resource 6:13 like caniuse.com to see which browsers support [UNKNOWN] paths and 6:17 whether vendor prefixes are still required. 6:22 So now if I save the stylesheet and refresh the preview 6:25 neat we can see how the polygon clipping path masks the h1. 6:30 So now parts of our text looks like it's behind the boat. 6:34 And some of the text is actually outside the clipping region. 6:38 So it's being clipped out. 6:42 So let me fix that by adjusting the left padding. 6:43 So instead of the left padding value being 280 pixels left me change it 6:46 to something like 195. 6:51 And once I save and refresh, there we go. 6:53 Looks much better. 6:55 Now we could also go back to the clip path generator tool and drag the clipping 6:57 region, and that'll adjust some of the values to reveal more of the text, but 7:02 I'll just go ahead and move forward with the padding adjustment I just made. 7:07 So at the time of this recording, Chrome, 7:12 Safari and Opera support the CSS defined clip-path functions. 7:15 However, Firefox does not. 7:20 But it does support a similar clip-path method that's done via SVG. 7:22 And we'll see how that works, next. 7:27 So, similarly we can reference an SVG clipping path. 7:29 And in SVG we create a clipping path with the clip path element. 7:34 So instead of defining the clip path polygon points in the CSS 7:38 we can do it with inline SVG. 7:43 And what's great is that our handy generator tool 7:45 also gives us the SVG markup we can embed in our HTML file. 7:49 And that code is located right next to the CSS code. 7:53 So I'm going to copy this SVG and go back to the index.html file and 7:57 I will paste it inside the wrap div. 8:04 [BLANK_AUDIO] 8:08 So now in this SVG the clipPath element here is what's used to 8:14 define the clipping path that masks an element. 8:19 And we can reference this SVG clipping path in our CSS 8:23 using the same clipPath property. 8:27 But instead of defining the polygon points In the clip-path value, 8:30 like I just did in our CSS. 8:35 We'll need to use the URL function as the clip-path value, so I'm going to type url. 8:37 Then inside the parenthesis I'll need to define the clip path I want to use. 8:45 So in this case, if I take a look at the SVG markup, the clip path element 8:50 has an id clip polygon so this is what I want to use inside that function. 8:55 So inside the parenthesis I'm going to Ready hash, because it's an ID. 9:01 Then define the clipPolygon ID name. 9:06 So, once I save our stylesheet, and refresh our preview, we can see how it 9:11 works just like it did earlier, when I defined the polygon points in the CSS. 9:16 Finally, it's also possible to animate and transition between two or 9:23 more clip path shapes with CSS. 9:27 And by doing so, we're able to generate lots of interesting results. 9:29 But first, moving forward, 9:33 I'm going to stick with the CSS polygon function for clipping path. 9:35 So let me undo This URL value and go back to the polygon function 9:39 and I'll go back to the markup and comment out the inline SVG. 9:46 So to animate a clipping path, I'll need to create a start point and an end point. 9:54 So I'll go back to the style sheet, and I'm going to define a key frame rule, so 10:00 right below the h 1 rule, I'm going to type @-webkit-keyframes. 10:07 And let's call this animation path. 10:13 So first I'll define the start point with 10:17 a 0% rule, and the endpoint at 100%. 10:22 So at 100%, I'll want the clip path position exactly where it is right now. 10:27 So to do that, let me cut out the clip path declaration from our h1, 10:33 then I'll paste it in the key frame rule here at 100%. 10:38 And next, as an example, at 0%, 10:42 I'm going to paste in the same clip-path declaration. 10:44 And I'm going to set all polygon points to 0. 10:49 As I mentioned earlier, 10:53 each set of comma-separated numbers represent a polygon point, and 10:54 currently I have 11 points, so I'll need to set all 11 points to 0. 10:59 All right so now I've set all the start points to 0 and our 0% rule. 11:10 So now I'll need to call this path animation and the h1 rule. 11:17 So let me scroll up here to the h1 rule. 11:21 And I'll say webkit animation. 11:24 [BLANK_AUDIO] 11:26 Call the name, which is path. 11:31 I'll set the duration to two seconds and let's set a timing function 11:33 of ease-in and a forwards fill mode. 11:37 And this way the animation will stop and hold on the last frame. 11:41 All right, so, let's take a look. 11:46 I'll save the style sheet, and 11:48 once I refresh the page, at first the text is entirely masked. 11:49 So, we don't see it. 11:54 Then it's slowly revealed by the animation of the clipping path. 11:55 So, let's take a look again. 11:59 [BLANK_AUDIO] 12:00 Pretty cool. 12:02 So when it comes to browser support, the latest versions of Chrome, Safari and 12:05 Opera support both the polygon shapes and the URL syntax with SVG. 12:10 And Firefox supports the SVG and URL syntax only. 12:16 But keep in mind that this is how things are at the time of this recording, and 12:20 things may have changed by the time you watch this. 12:24 So be sure to check out the latest support chart at caniuse.com to see 12:27 what current browser support is looking like. 12:32 I posted the link to that in the teacher's notes. 12:34 So, go have fun and 12:38 explore some of the creative ways you can use CSS clipping paths in your design. 12:39 And if you create something awesome, 12:43 don't forget to share it with us here at Treehouse. 12:45 Thanks, everyone. 12:47