1.2 Clipping and Masking
Clipping and masking are two very common operations in the world of computer graphics. They both obscure portions of a visual element, but there are a few differences between the two. In this lesson you’ll learn what those differences are, and we’ll also cover proper CSS usage and browser support.
1.2 Clipping and Masking
[MUSIC] Let's kick things off with a coarse overview. First you're gonna learn to the difference between clipping and masking. Then we're gonna move onto a proper CSS syntax and usage for both operations. And finally we'll take a look at the browser support. Now clipping and masking are two operations that hide visual portions of an element. But if they do the same thing, what's the difference between them? To put it simply, clipping uses paths, masking uses images. Let's be more precise. When clipping, you're defining an area of an element that will be visible. Anything around this area will be hidden or clipped. Now on the other hand when masking. You're using a mask image that affects the alpha channel of the element. That means you can create areas that are either fully or partially transparent. Now how about using these two operations in CSS? Let's begin with clipping. Back in the day you would use the clip property with a rectangle as its value, as you can see right here. This code will actually clip this image by the 500 pixel square we created. Anything inside the square is shown while the rest is hidden. Now the clip property has a few issues. First of all it's only works on absolutely positioned elements. Second it can only do rectangles and third, it's deprecated, meaning it's old and there's a new or better version that browsers will use moving forward. Now this better version is called clip path and it works something like this. We do webkit-clip-path: inset[100px]. The syntax is a bit different, in this case we're using an inset value which creates a rectangle. The example that I showed here produces this result. The clip path will start with an offset of 100 pixels from all four corners. However you can specify up to four values without commas, like this. In this case, the path will start at 100 pixels from the top left and bottom right corners. And 200 pixels from the top right and bottom left corners. And you're not limited to using a rectangle either. A clip-path works with circle ellipse and polygon as you can see in the rest of the examples here. And the cool thing is it also works with SVG's and more specifically with paths, defined inside an SVG. So if we take a look here, we have a clip path defined with the WebKit's prefix of course. And it gives us the URL of clip demo which is a clip path defined inside this SVG. And here we have three circles. And the result of this is something like this. So notice if we hand check this here is the full image, and here it is with a clip path. Now in this example clip path, we'll actually combine all three shapes, and use the resulting shape as a clipping area. Also you can use any kind of shape available in SVG. Rectangle, circle, ellipse, path, polygon, image and text. You can also use clipping on pretty much any kind of HTML element, not just images. So in this example we have a div which has an idea of container that just has some paragraphs and we're sending a clip path to a polygon value which results in this bit. So all I did was create a polygon starting from this point here. And going like this in a zig zag format and then coming back around and completing the polygon. Now a very cool thing you can do is add transitions and animations to a shape that's being defined as a clip path. So for example it can achieve this effect, right? This is an image in the background but I'm just clipping the circle. And the code is pretty straightforward. We set a clip path to a circle of 200 pixels and then on hover we make the circle 240 pixels. And all we got to do is add a transition here. Animations are very similar where you define the key frames that you want, you set the duration and iteration count and you can very easily create something like this, which on hover that triggers an animation. And as you can see in the background where you have a polygon here set by default and we just change on hover, we just change the, or we set the animation. And we have three stages here where we just change that polygon shape. Now before we wrap things up with clipping, I wanna quickly show you a property called background clip. And this lets you specify how far our background image or color can extend. And it has four values. It can be content box, padding box, border box and text. Now let's quickly go over each one and see what they're doing. So border box will allow the background to extend beneath the border. As you can see I've made a dotted border intentionally. So, you can see the gray background just going under that border. Padding box will allow the background to extend to the inside edges of the border, as you can see here. Content box will actually clip the background to the edges of the content. By doing that, it disregards any margin or padding that element has. And finally the most fun I believe, it's the text value. And this one actually paints the background inside the text. You can create some pretty Interesting effects with this. And that's about it for clipping. Now let's move onto masking. Masking is very similar to clipping but it does take things a bit further. So instead of using shapes to define what is and what isn't visible, masking will filter what you can and cannot see by using the transparency. There are two types of masks you can use, luminance and alpha. Now a luminous mask will actually first convert the masking image to grayscale if it's not grayscale already. Then, the darker areas will be rendered as transparent and the lighter ones as opaque. In other words, the black areas are hidden, the white areas are visible. And anything in between will have varying degrees of transparency. Now, for example, have a look at the mask here. The mask I'm using, the mask-1.jpg looks like this. It's just a collection of colored strips, but when we use it with our image to here, we get this bit. The original image is not rendered equally. The lighter the band color, the more of the image comes through, and that's a luminous mask. An alpha mask is very similar, but it only uses the alpha channel of the mask image. So we have this mask-2.png here, it's just a blurred white circle on a transparent background. And if we set this to our image, it looks like this. As you can see the opaque areas of the mask which is the circle inside will render the corresponding areas of this image. Everything else is hidden or it has various levels of transparency like about blur. Now how can you use these masks in CSS? Well there are two properties you need to know. The first one you already saw. It's called mask. It looks like this. And for the mask you can use rasterized image formats like jpg or png, but also SVG graphics and even CSS gradients. If you prefer using masks that are defined inside inline SVG's, you can do so by referencing the idea of that element. So for example I have an SVG here. A mask with an IID of masking. And then I just go to my image and I say mask url #masking. And that gives me this result. But be careful. This only works in Firefox for now. Now the mask property is actually a shorthand notation. Remember how in CSS we can write a shorthand notation for the background? And we can include stuff like background color image. Repeat position and all that stuff. Well you can do something similar with masking and you can see something like -webkit-mask and you can write a whole bunch of values here. And those values stand for mask image repeat position clip origin, origin, size, composite and moat. There are a bunch of them and if you want to see what each and everyone is doing then please check out the official spec which is the link down below. Now, if you want to use all these properties in their full form. You would write this, but if you prefer shorthand form. You can write this. But now there is another way of masking in CSS and here we're talking about the second property I mentioned which is mask a border. This will take the image you specify, slice it into nine pieces, four corners, four edges and a middle piece. And then repeat and stretch those pieces around your element so you can essentially mask the edges and corners. It's in fact very similar to the border image property. The syntax looks like this, -webkit-mask-box-image for webkit of course and mask-border for the rest of the browsers. And that's pretty much it for masking. Now let's see what kind of browser support there is for these two operations. These techniques are relatively new, so they're not yet fully supported. As you can see, they are supported in all major browsers but only partially really, which means not all the features will be available. Safari, Chrome and Opera require the webkit prefix while Firefox only supports certain features in its experimental version of the browser. That's it for clipping and masking in CSS. I thank you very much for watching. I'm Adi Purdila and until next time take care.