1 00:00:00,000 --> 00:00:04,587 [MUSIC] 2 00:00:04,587 --> 00:00:06,170 Hey everyone, Guil here. 3 00:00:06,170 --> 00:00:07,281 And in this workshop, 4 00:00:07,281 --> 00:00:11,870 we're going to learn about an advanced CSS feature called clipping paths. 5 00:00:11,870 --> 00:00:15,930 Clipping is a long-time feature of graphic design that's used to partially or 6 00:00:15,930 --> 00:00:18,650 fully hide parts of a design element. 7 00:00:18,650 --> 00:00:21,110 And, CSS has a clip path property. 8 00:00:21,110 --> 00:00:24,390 That lets us clip portions of any HTML element. 9 00:00:24,390 --> 00:00:27,795 But the concept of clipping isn't entirely new to CSS. 10 00:00:27,795 --> 00:00:31,719 You see, a clip property was first introduced in CSS 2.1 to define 11 00:00:31,719 --> 00:00:36,322 the visible portions of an element, but the purpose of that clip property was for 12 00:00:36,322 --> 00:00:40,940 rectangular shapes and it only worked with absolutely positioned elements. 13 00:00:40,940 --> 00:00:42,680 It wasn't all that flexible. 14 00:00:42,680 --> 00:00:47,143 So that might be why the clip property is now deprecated in favor of the new clip 15 00:00:47,143 --> 00:00:48,045 path feature. 16 00:00:48,045 --> 00:00:52,587 With the clip path property, we're not limited to rectangular clipping paths. 17 00:00:52,587 --> 00:00:55,745 We're able to draw clipping regions with basic shapes, 18 00:00:55,745 --> 00:01:00,550 polygon points or SVG elements so let's take a look at some examples. 19 00:01:00,550 --> 00:01:05,480 The clipping feature is also part of the CSS masking specification, which gives us 20 00:01:05,480 --> 00:01:09,330 two methods for partially of fully heading portions of html elements and 21 00:01:09,330 --> 00:01:11,580 those methods are clipping and masking. 22 00:01:11,580 --> 00:01:14,836 Now I teach how masking works in a related workshop. 23 00:01:14,836 --> 00:01:18,628 So check out the teachers notes for a link to that particular workshop. 24 00:01:18,628 --> 00:01:21,560 And in this workshop, we're gonna experiment with clipping. 25 00:01:22,940 --> 00:01:27,750 Similar to the alpha and luminance CSS mask I covered in a related workshop, we 26 00:01:27,750 --> 00:01:32,860 can use the clip-path property to describe the visible regions of an element. 27 00:01:32,860 --> 00:01:37,070 And we draw those regions as paths using basic shapes, polygon points, 28 00:01:37,070 --> 00:01:38,690 or SVG elements. 29 00:01:38,690 --> 00:01:42,960 Then, anything outside that drawn region, is not rendered in the browser. 30 00:01:42,960 --> 00:01:46,520 So let's first take a look at a few examples of using clip path 31 00:01:46,520 --> 00:01:47,910 with basic shape functions. 32 00:01:47,910 --> 00:01:53,180 So I'm gonna head over to an awesome clip path maker called clippy, 33 00:01:53,180 --> 00:01:55,200 created by Bennett Feeley. 34 00:01:55,200 --> 00:01:59,080 Now, this is a great tool for creating clip path shapes or 35 00:01:59,080 --> 00:02:03,120 simply experimenting with some of the things you can do with clipping paths So 36 00:02:03,120 --> 00:02:06,480 for example here we're making a triangle polygon. 37 00:02:06,480 --> 00:02:08,640 But if we go over here to a right side bar and 38 00:02:08,640 --> 00:02:13,780 click on the circle shape, we can see how parts of the background become hidden or 39 00:02:13,780 --> 00:02:17,040 clipped to reveal a circular background image. 40 00:02:17,040 --> 00:02:20,720 And notice the CSS it writes at the bottom of the page here. 41 00:02:20,720 --> 00:02:23,240 And these are the styles we can use in our CSS. 42 00:02:23,240 --> 00:02:25,760 And we get a similar result with another shape. 43 00:02:25,760 --> 00:02:28,460 So for instance if I click the ellipse shape 44 00:02:28,460 --> 00:02:31,850 then we get an elliptical shaped background image, and so forth. 45 00:02:31,850 --> 00:02:36,340 So this is all being done via the clip path property we see here. 46 00:02:36,340 --> 00:02:41,160 Which, as we can see, works a lot like the mask image property. 47 00:02:41,160 --> 00:02:44,450 Now, the difference is, clip path is entirely flexible 48 00:02:44,450 --> 00:02:48,540 since we're able to adjust the clipping path directly in the CSS. 49 00:02:48,540 --> 00:02:54,950 So, each set of comma separated numbers here represents a clip path point. 50 00:02:54,950 --> 00:03:00,020 With clipping path, the polygon function is the most complex clip path function. 51 00:03:00,020 --> 00:03:02,960 So we use it for drawing more complex shapes. 52 00:03:02,960 --> 00:03:05,645 For instance, if I click on the hexagon shape, 53 00:03:05,645 --> 00:03:09,417 it creates six points to render the background image as a hexagon. 54 00:03:09,417 --> 00:03:13,291 And the same happens if I click on the pentagon shape, 55 00:03:13,291 --> 00:03:15,626 the right arrow shape and so on. 56 00:03:15,626 --> 00:03:20,425 So now if I copy the code at the bottom of the page here, 57 00:03:20,425 --> 00:03:25,226 and go back to my project files, and in the stylesheet 58 00:03:25,226 --> 00:03:29,834 if I paste that generated CSS inside the wrap rule. 59 00:03:29,834 --> 00:03:32,938 Once I save my style sheet and preview the webpage, 60 00:03:32,938 --> 00:03:38,180 notice how everything in the wrap element is no longer rendered by the browser. 61 00:03:38,180 --> 00:03:40,830 Parts of the wrap element are now clipped to 62 00:03:40,830 --> 00:03:43,120 render an arrow shaped background image. 63 00:03:43,120 --> 00:03:44,390 Pretty neat. 64 00:03:44,390 --> 00:03:47,880 We're also able to create some neat masking effects 65 00:03:47,880 --> 00:03:49,520 with the clip path property. 66 00:03:49,520 --> 00:03:52,003 So I'm going to go back to the stylesheet and 67 00:03:52,003 --> 00:03:55,650 undo the clip path properties I just paste in. 68 00:03:55,650 --> 00:04:00,460 Now I'm going to create a clipping mask that will clip parts of text, 69 00:04:00,460 --> 00:04:03,510 if its positioned in front of this boat image. 70 00:04:03,510 --> 00:04:07,510 That way it will appear as if the text is behind the boat. 71 00:04:07,510 --> 00:04:11,650 So, again, instead of having to figure out all the polygon points ourselves then 72 00:04:11,650 --> 00:04:17,380 writing the points in the style sheet, we can use the clipping tool or, 73 00:04:17,380 --> 00:04:23,480 I like to use another great clip path generator tool created by cssplant.com. 74 00:04:23,480 --> 00:04:27,880 So first I'm going to drag the boat.jpg background image 75 00:04:27,880 --> 00:04:30,840 inside this mask generator. 76 00:04:30,840 --> 00:04:33,270 So there it is, it's all set up. 77 00:04:33,270 --> 00:04:36,760 And next I'll need to draw the masking region I want. 78 00:04:36,760 --> 00:04:40,670 So I'm going to select the Polygon Lasso tool here. 79 00:04:40,670 --> 00:04:45,750 And just start clicking in the areas where I wanna draw that clipping region. 80 00:04:45,750 --> 00:04:51,917 So I'm gonna start up here at the top of the boat and create a few points. 81 00:04:51,917 --> 00:05:01,917 [BLANK_AUDIO] 82 00:05:09,917 --> 00:05:12,794 All right so this is the clipping region, and 83 00:05:12,794 --> 00:05:17,111 now everything inside this region will be allowed to show through, 84 00:05:17,111 --> 00:05:21,806 while everything outside will be clipped out and will not appear as part of 85 00:05:21,806 --> 00:05:27,060 the background image, as we're seeing here in the clip path generator preview. 86 00:05:28,400 --> 00:05:32,910 So, I want the clipping mask as part of the h1. 87 00:05:32,910 --> 00:05:37,880 So, in the clip half generator I'm going to scroll down and 88 00:05:37,880 --> 00:05:42,930 copy the CSS code provided by the generator, then paste it in the h1 rule. 89 00:05:42,930 --> 00:05:47,830 So, right here under the comment for Chrome and Safari, let's start here. 90 00:05:47,830 --> 00:05:52,363 I'm going to copy this web kit clip path Declaration and 91 00:05:52,363 --> 00:05:57,000 go back to my style sheet and paste it inside the h1 rule. 92 00:05:57,000 --> 00:06:03,542 [BLANK_AUDIO] 93 00:06:03,542 --> 00:06:08,459 So as I'm making this video, right now we'll need to use the web kit prefix 94 00:06:08,459 --> 00:06:13,100 to support the latest version of Chrome, Safari, and Opera. 95 00:06:13,100 --> 00:06:17,550 But as you're watching this things may have changed so check an online resource 96 00:06:17,550 --> 00:06:22,380 like caniuse.com to see which browsers support [UNKNOWN] paths and 97 00:06:22,380 --> 00:06:25,680 whether vendor prefixes are still required. 98 00:06:25,680 --> 00:06:30,120 So now if I save the stylesheet and refresh the preview 99 00:06:30,120 --> 00:06:34,690 neat we can see how the polygon clipping path masks the h1. 100 00:06:34,690 --> 00:06:38,690 So now parts of our text looks like it's behind the boat. 101 00:06:38,690 --> 00:06:42,010 And some of the text is actually outside the clipping region. 102 00:06:42,010 --> 00:06:43,490 So it's being clipped out. 103 00:06:43,490 --> 00:06:46,333 So let me fix that by adjusting the left padding. 104 00:06:46,333 --> 00:06:51,319 So instead of the left padding value being 280 pixels left me change it 105 00:06:51,319 --> 00:06:53,208 to something like 195. 106 00:06:53,208 --> 00:06:55,625 And once I save and refresh, there we go. 107 00:06:55,625 --> 00:06:57,333 Looks much better. 108 00:06:57,333 --> 00:07:02,325 Now we could also go back to the clip path generator tool and drag the clipping 109 00:07:02,325 --> 00:07:07,473 region, and that'll adjust some of the values to reveal more of the text, but 110 00:07:07,473 --> 00:07:12,543 I'll just go ahead and move forward with the padding adjustment I just made. 111 00:07:12,543 --> 00:07:15,701 So at the time of this recording, Chrome, 112 00:07:15,701 --> 00:07:20,542 Safari and Opera support the CSS defined clip-path functions. 113 00:07:20,542 --> 00:07:22,753 However, Firefox does not. 114 00:07:22,753 --> 00:07:27,210 But it does support a similar clip-path method that's done via SVG. 115 00:07:27,210 --> 00:07:29,810 And we'll see how that works, next. 116 00:07:29,810 --> 00:07:34,140 So, similarly we can reference an SVG clipping path. 117 00:07:34,140 --> 00:07:38,960 And in SVG we create a clipping path with the clip path element. 118 00:07:38,960 --> 00:07:43,150 So instead of defining the clip path polygon points in the CSS 119 00:07:43,150 --> 00:07:45,400 we can do it with inline SVG. 120 00:07:45,400 --> 00:07:49,220 And what's great is that our handy generator tool 121 00:07:49,220 --> 00:07:53,660 also gives us the SVG markup we can embed in our HTML file. 122 00:07:53,660 --> 00:07:57,120 And that code is located right next to the CSS code. 123 00:07:57,120 --> 00:08:04,551 So I'm going to copy this SVG and go back to the index.html file and 124 00:08:04,551 --> 00:08:08,542 I will paste it inside the wrap div. 125 00:08:08,542 --> 00:08:14,333 [BLANK_AUDIO] 126 00:08:14,333 --> 00:08:19,140 So now in this SVG the clipPath element here is what's used to 127 00:08:19,140 --> 00:08:23,970 define the clipping path that masks an element. 128 00:08:23,970 --> 00:08:27,640 And we can reference this SVG clipping path in our CSS 129 00:08:27,640 --> 00:08:30,100 using the same clipPath property. 130 00:08:30,100 --> 00:08:35,860 But instead of defining the polygon points In the clip-path value, 131 00:08:35,860 --> 00:08:37,850 like I just did in our CSS. 132 00:08:37,850 --> 00:08:45,840 We'll need to use the URL function as the clip-path value, so I'm going to type url. 133 00:08:45,840 --> 00:08:50,880 Then inside the parenthesis I'll need to define the clip path I want to use. 134 00:08:50,880 --> 00:08:55,840 So in this case, if I take a look at the SVG markup, the clip path element 135 00:08:55,840 --> 00:09:01,180 has an id clip polygon so this is what I want to use inside that function. 136 00:09:01,180 --> 00:09:06,980 So inside the parenthesis I'm going to Ready hash, because it's an ID. 137 00:09:06,980 --> 00:09:11,550 Then define the clipPolygon ID name. 138 00:09:11,550 --> 00:09:16,490 So, once I save our stylesheet, and refresh our preview, we can see how it 139 00:09:16,490 --> 00:09:21,440 works just like it did earlier, when I defined the polygon points in the CSS. 140 00:09:23,210 --> 00:09:27,000 Finally, it's also possible to animate and transition between two or 141 00:09:27,000 --> 00:09:29,660 more clip path shapes with CSS. 142 00:09:29,660 --> 00:09:33,470 And by doing so, we're able to generate lots of interesting results. 143 00:09:33,470 --> 00:09:35,130 But first, moving forward, 144 00:09:35,130 --> 00:09:39,890 I'm going to stick with the CSS polygon function for clipping path. 145 00:09:39,890 --> 00:09:46,910 So let me undo This URL value and go back to the polygon function 146 00:09:46,910 --> 00:09:51,590 and I'll go back to the markup and comment out the inline SVG. 147 00:09:54,520 --> 00:10:00,335 So to animate a clipping path, I'll need to create a start point and an end point. 148 00:10:00,335 --> 00:10:07,102 So I'll go back to the style sheet, and I'm going to define a key frame rule, so 149 00:10:07,102 --> 00:10:13,167 right below the h 1 rule, I'm going to type @-webkit-keyframes. 150 00:10:13,167 --> 00:10:17,127 And let's call this animation path. 151 00:10:17,127 --> 00:10:22,228 So first I'll define the start point with 152 00:10:22,228 --> 00:10:27,625 a 0% rule, and the endpoint at 100%. 153 00:10:27,625 --> 00:10:33,210 So at 100%, I'll want the clip path position exactly where it is right now. 154 00:10:33,210 --> 00:10:38,088 So to do that, let me cut out the clip path declaration from our h1, 155 00:10:38,088 --> 00:10:42,292 then I'll paste it in the key frame rule here at 100%. 156 00:10:42,292 --> 00:10:44,921 And next, as an example, at 0%, 157 00:10:44,921 --> 00:10:49,730 I'm going to paste in the same clip-path declaration. 158 00:10:49,730 --> 00:10:53,100 And I'm going to set all polygon points to 0. 159 00:10:53,100 --> 00:10:54,060 As I mentioned earlier, 160 00:10:54,060 --> 00:10:59,050 each set of comma-separated numbers represent a polygon point, and 161 00:10:59,050 --> 00:11:03,865 currently I have 11 points, so I'll need to set all 11 points to 0. 162 00:11:10,660 --> 00:11:17,160 All right so now I've set all the start points to 0 and our 0% rule. 163 00:11:17,160 --> 00:11:21,620 So now I'll need to call this path animation and the h1 rule. 164 00:11:21,620 --> 00:11:24,470 So let me scroll up here to the h1 rule. 165 00:11:24,470 --> 00:11:26,750 And I'll say webkit animation. 166 00:11:26,750 --> 00:11:31,292 [BLANK_AUDIO] 167 00:11:31,292 --> 00:11:33,460 Call the name, which is path. 168 00:11:33,460 --> 00:11:37,580 I'll set the duration to two seconds and let's set a timing function 169 00:11:37,580 --> 00:11:41,700 of ease-in and a forwards fill mode. 170 00:11:41,700 --> 00:11:45,640 And this way the animation will stop and hold on the last frame. 171 00:11:46,660 --> 00:11:48,070 All right, so, let's take a look. 172 00:11:48,070 --> 00:11:49,950 I'll save the style sheet, and 173 00:11:49,950 --> 00:11:54,500 once I refresh the page, at first the text is entirely masked. 174 00:11:54,500 --> 00:11:55,610 So, we don't see it. 175 00:11:55,610 --> 00:11:59,160 Then it's slowly revealed by the animation of the clipping path. 176 00:11:59,160 --> 00:12:00,417 So, let's take a look again. 177 00:12:00,417 --> 00:12:02,709 [BLANK_AUDIO] 178 00:12:02,709 --> 00:12:03,530 Pretty cool. 179 00:12:05,870 --> 00:12:10,020 So when it comes to browser support, the latest versions of Chrome, Safari and 180 00:12:10,020 --> 00:12:16,180 Opera support both the polygon shapes and the URL syntax with SVG. 181 00:12:16,180 --> 00:12:20,850 And Firefox supports the SVG and URL syntax only. 182 00:12:20,850 --> 00:12:24,720 But keep in mind that this is how things are at the time of this recording, and 183 00:12:24,720 --> 00:12:27,690 things may have changed by the time you watch this. 184 00:12:27,690 --> 00:12:32,510 So be sure to check out the latest support chart at caniuse.com to see 185 00:12:32,510 --> 00:12:34,870 what current browser support is looking like. 186 00:12:34,870 --> 00:12:37,150 I posted the link to that in the teacher's notes. 187 00:12:38,150 --> 00:12:39,232 So, go have fun and 188 00:12:39,232 --> 00:12:43,792 explore some of the creative ways you can use CSS clipping paths in your design. 189 00:12:43,792 --> 00:12:45,456 And if you create something awesome, 190 00:12:45,456 --> 00:12:47,750 don't forget to share it with us here at Treehouse. 191 00:12:47,750 --> 00:12:48,650 Thanks, everyone.