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
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.
Fork this workspace to follow along.
Quick Reference
Related Workshops
Helpful Tools
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up