Using ClipPath & Other Masking Tools

[00:00:00]
>> Sarah Drasner: Okay, so how did I do these diagonals? This is an SVG. So I make this piece of the content here, this hero. I made it a certain color. And then I made an SVG, and I just drew this path value basically said, okay, the view box. If you're not familiar with SVG, think of it like a giant piece of graph paper that goes out in every single direction.

[00:00:26]
And the view box is this tiny little window that you're looking at that piece of graph paper. So things can be outside of it but you're really only seeing the thing that's inside the view box. So basically, remember how we said X, Y ,X, Y for all the standard?

[00:00:41]
So how that's view boxes work too. So in that graph paper, we're plotting a point 00, and it's 0X, 0Y, then draw 500, 500, we get the view box. Then inside of there, you can draw path points and lines. And I won't cover that in a lot of detail now.

[00:01:02]
Tomorrow, I tell you everything about that. So if you're back here tomorrow, then you'll learn all that stuff, or you can watch it online later. So you can basically just draw shapes. You can just say here, to here, to here. And I could have used a polygon for it as well.

[00:01:20]
I chose to do a path because it was a bit smaller. But, really, it doesn't matter. And this is just a triangle. It's just a triangle. But the kind of secret sauce is this preserveAspectRatio none. And by putting preserveAspectRatio none, it scales to the width and height of the container, no matter how big or small it is in any direction.

[00:01:41]
So usually, SVG can scale with their container, but they're going to stay consistent. So that if you have a face, it's not like [SOUND]. [LAUGH] preserveAspectRatio none is basically saying, just fill the whole thing up. So I have an implicit size for this area, and then as I go across, it also works for responsive for mobile.

[00:02:05]
So it kind of just fills whatever space but it has an implicit height. So I could have also made the height a little bit smaller on mobile if I wanted to, but I was kind of fine with it being a different shape. And then I can repeat that and use it again and again down the thing.

[00:02:22]
Any questions about that? Make sense? Cool, cool. SVG is good for drawing because it's built with math and it's also not a hack. When you draw shapes in CSS, you're actually hacking something that's meant for a layout into drawing. And when you're using SVG, it was really just built for drawing on the web.

[00:02:41]
That's its job. So you're not actually hacking anything, you're just using it for what it's intended for. There's another way of making these kind of clip-paths, and that's with CSS. You can actually use this clip path maker to do things like this for images and things like that, if you wanna make cool shapes with images.

[00:03:02]
The one thing I will say though, and this is a really cool tool, it's called Clippy. So write Bennett Feely Clippy. You're gonna end up somewhere else if you just write Clippy into your browser window and look it up. Bennett Feely is the person who built this tool.

[00:03:18]
And it has all sorts of different ones, and it also allows you to do custom ones. So you can see how simple that code is down there, clip path polygon. And that's really nice, except it's not super well supported in all browsers. I think it's, I can't remember but we're gonna show you that on the next slide.

[00:03:39]
SVG though, using SVG for clip-paths, is well supported. All over the place. So you could either use SVG as a fallback or just use SVG as a clip path. Or you could do what I did with the shape outside and say, if you don't support it, fine, but if you're Chrome, show this cool thing, kind of thing.

[00:03:58]
This Pen by yoksel goes on and on and on, and it shows every kind of clip. So using CSS, using clip-path, using masks, using SVG, using, it shows how to use it multiple ways. It's super cool. And she has this like browser support things and they automatically update.

[00:04:20]
So you can always go there to find out what the browser support is and also what the code looks like. And also what, and it's live, so everything is, you can go check out the code for the page too. She's amazing. So you should definitely check out her work.

[00:04:34]
Anyways, she's just like a browser genius. I don't know. And one of the more under appreciated devs out there. This code pin that I made with React Motion. This is done with the same kind of principle of that preserveAspectRatio none, where you have this kind of background with an SVG.

[00:04:54]
And I kind of changed the content based on how much is here, and then also that SVG in the background is just like preserveAspectRatio none. And it's there mostly for display kinda purposes. So it's just like a reactant SVG layout, that is a little bit more interesting than some other layouts.