Masking in CSS

Hello guys. Welcome to our CSS series. In our last segment we saw how we add gradients through CSS.  We had seen Linear Gradient, left to right, top to bottom and diagonally as well. After that we had seen the radial gradient as well. Guys I hope all the practical that we had done in the last practical, you have done all the practised all those practical on your own and checked. Our today's segment is about CSS Masking property. Usually, a mask means that if we apply one face over our face. We call it wearing a mask. In the same way we have CSS masking property. In which we apply one image over the other or some other effect we apply and we mask the image. Like it is written here.  The mask property in CSS is used to hide an element using the clipping or masking the image at specific points means we are clipping the image at a specific point or we are masking it with the help of some other element. Masking defines how to use an image for the graphical element as a Luminance or Alpha Mask means how we use one image to make another image transparent or light or to mask. This is defined through masking. It's a graphical operation that can fully or partially hide the portion of an element or object that means a partial or complete portion of any element can be hidden through masking. Using masking it is possible to show or hide the parts of an image with different opacity levels. This is very important. Different optical level means we can completely mask or make it look light or lighter. Like we had seen in opacity that we can slowly add transparency. In the same way with the help of masking we can totally or partially hide the image. How is masking achieved? For that we have a mask image property whose help we can do masking.   In total we are going to see two examples today. In the first example, we are going to perform masking with the help of a simple image. In the second example we will perform masking through gradients. So, the first one is through the image. So for that we will open the Sublime Text, example masking using image. For this we will name it masking image.html. We will run the program. Okay. So, what we will do for this is that 1st of all we will show the images. So, let’s say 1st of all we will take h3. This is an example of masking. Style, body, text aligned centre, save. Okay. So, our heading has come. This is h3, we will make it h2. Here, h3, original images. So, here we will get in total 2 images. 1st image is, images/learnvern.jpg. I have 2 images available. One is Learnvern and the other is an image named mask. So, what I will do is, one image is Learnvern and the other image is images/mask.jpg, save. Okay. So, this is my Learnvern image and what is seen, the big one is my mask image. We will define this image. Let’s say we will take width, 200 pixels and height we will take 100 pixels, save. So, here both my images have come. One is my Learnvern image and the 2nd one is the one I am going to use for masking. I have intentionally used a light image in which there is a lighting effect. It is a light colour image. Here again after the original image, using a masking effect. Okay. When we will mask the image, how is the output that we will get that we are going to see here. For that what we will do here is, we will take the same image, that is there with us but we will give it an id. Let’s say masked and here # mask, our id and in that we will take, the width and height we had taken, we will place the same thing but here we will apply the mask property in which will come webkit, after that mask box image. Okay. So, this is our mask box image, in that we will place the url or our image. So, that is this one. That's it. So, what has happened on this image, the Learnvern, our logo image. On that we are performing the masking through the image. Which is this image. To this image, through this image we will perform masking. So, reload, so, you can see that both the images are almost looking the same but since with the help of this image we have performed masking. This dark purple colour which is there in the logo in comparison to that we are getting a light colour here because this image is of light colour which has more of whiteness. So, this image has been placed on the other image and the lightness that we get, that is this one, in both the images you can see a slight colour difference. So, this is our masking using images. For this we have used the property masked box image. We will go next to the slide. Our 2nd example is with the help of gradients. How we can with the help of an image, with the help of an image we can perform masking. So, let’s say I will copy the same. We need the image but we don’t need this mask. From the original image we don’t require this image, not even this. We will remove this tag. Okay. This is an example of masking using linear gradient. Save. Masking using linear gradient. Okay. Save. Currently we can remove this mask as well or we can remove this. Okay. Save. Now we will run this program. So, you can see our image now. We have not performed the gradient on it. Now we will perform gradients on it. So, for that we will write here, webkit, mask, image. that's it. Mask image, not box image. Now we have to apply linear gradients. So, webkit, gradient, and inside gradient, we have to perform linear gradient, so we will write it step by step. So, 1st will come linear, after that comma. Now we want that our gradient is performed from top to bottom. So, right top, right bottom. So, this is our direction that we have to come down from top to bottom. After this we will take colour. So, let’s say from, you can take any colour. Currently I will use RGBA colour. RGB colour properties we have seen when we had conducted CSS colour segments.  So, let’s say, I wish that my gradient should be performed only with white colour. I don't want anything else; I want to perform in simple white colour. So, for that we will take 0, 0, 0. Okay. So, this is our white colour that has come. This is from colour, after colour we will take second to colour. Means in which colour we have to perform this. So,  we will again take the same RGBA, we will take the same 0, 0, 0, as you know that in RGBA, A is used for the purpose of opacity. To add transparency. Now, we want that the transparency should be zero initially, maximum 1 and after that it reduces. So, we will take 0.9 here. Okay. So, from this to this. Okay. So, now we are saving it, reload. So, as you can see that the top portion is highly transparent means it is totally transparent and the below portion, we are getting in 0.9 opacity, means we are seeing it with visible opacity. So, how we have masked the image here, from top right to top bottom, means while coming from top to the bottom, you can see here in a linear way, while coming from top to bottom, from one colour to another, means from white to white itself we have performed it. So, here the question will be why we have not used the colour here directly white and black and why have we used this RGBA directly?  Because RGB gives us the facility to add the opacity with the colour. So, in the white colour we have performed this transition. We have performed this masking where we have used the white colour, we have kept the white collar as it is but we have only changed the opacity so that our image moves from invisible to visible from hide to show. So, to generate this effect, we have used RGBA colour. Next in the slide is the same but by using the gradient, radial gradient. We have used linear gradient, now we will use radial gradient. We will copy the same image; we will copy the same program. Radial, radial and here we will remove this portion. Okay, save and...Okay. So, this is a program of radial gradients. Currently you can see that there is no effect here.  So, what we will do to perform radial gradient, we will perform radial So, here it will come, as it is our program, we have not made any changes, we have taken the image, body and in masked, webKit, mask image, since it is radial here, so, radial gradient, in this we want that this should be performed in circular way. So, first of all circle, after circle from where to where we want to start the circle, circle at 50%, 50%. So, this defines in which way we want the circle. So, 50% in the x axis and 50% in the y axis, we will give it this way and start. Colour we have to give, let's say I give the gradient in blue colour as I want it to perform in blue colour. So, I will give 40% and I want to add transparency to it, like we had added transparency in a linear way, in the same way we will add transparency here. So, it should be RGBA, 0, 0, 0, that is white colour, 0.3 This is my transparency that has come and after that how much transparency do we require? That should be around 70%, we will take it. We will save it. Okay. As you can see, our radial gradient has been generated here. Here, radial, as and when it is going out the transparency in it is increasing. So, here if we remove 50%-50%, save. There is not much difference. 50% is our normal circle which has been generated. So, I have removed this. Now, we will take this width as 400, 200. Okay, so we have made this image a little bigger. So, here you can see that our radial gradient is increasing in a circular way over the image. So, here you can see that our images get masked while growing outside. Here we will remove the 70%. So, our masked portion has been reduced and inner circular, the dark portion that is there, we are getting it more. We will get this back 70%. So, here you can see that we are getting 70% masked portion and here our blue colour is also visible. So, this is in our radial way, how we have performed the masking in a radial way. What we have seen earlier was in a linear way, while coming from top to bottom. We can perform it in multiple ways. If in a linear way, in place of right top right bottom if you take left top left bottom. So, whichever direction you want to give, in that way you can perform the Linear Gradient, add it. Even here the direction that you wish to give, not direction but in how much percentage you want to generate the circle, that you can do. So, in total we performed the masking in three ways. First was with the help of an image, one image on top of the other image we performed the masking and then in the linear way. We have now seen top to bottom examples but you can perform it in whichever way you want, left to right, right to left, top bottom or bottom to top. And masking radial means how in the radial way you can perform the masking while coming in the outer side. So, these were our different ways of masking. So, guys, today's topic was of an advanced level. How we can mask the image.  I request everyone that whoever is watching this video should perform this practice on your own, perform it, check it and test it. So that we can identify how much we can learn from this. When we perform the practical, we get the questions, we get the errors and there are mistakes that happen and from those we can learn how this property actually works. We can learn it only through practicing. So, I request when you perform the practical if you are getting any query or question. Or if you are getting any question in our today's segment, you can tell us on forums.learnvern.com. We will revert to all the questions with solutions there. In our next segment we will learn about CSS fonts. What are CSS fonts and which other designs we can apply in fonts. Thank you.