Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

CSS Clipping Paths

12:47 with Guil Hernandez

Clipping is a longtime feature of graphic design that's used to hide parts of a design element. With CSS clipping paths, we're able to draw regions with basic shapes, polygon points, or SVG to hide—or clip—portions of any HTML element.

Teacher's Notes
Video Transcript
Downloads

Fork this workspace to follow along.

Quick Reference

CSS Masks

Helpful Tools

Browser Support

clip-path property

[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

You need to sign up for Treehouse in order to download course files.

Sign up