Understanding CSS Gradients

Hello guys. Welcome to our CSS series. In our last segment we had seen about CSS box shadow and text shadow property. I hope all the practical related to box shadow and text shadow you have performed on your own and practiced it. Our today’s segment is on CSS gradient property. Now, what is gradient? So, basically when we had performed html gradient. We had seen the basic use of gradient, how it performs and looks, all that we had seen. Gradient’s meaning is a smooth transition from one colour to another colour. Not just from one colour to another but we can use multiple colours in gradient. So, what is the use of gradient to us? Its 1st use is that, you don’t have to use images to display transition effects, we usually take a transition image and keep it in the background. But if we don’t want to use that, instead of using an image, with the help of gradients also we can add a good background to the web page. The download time and bandwidth usage can also be reduced. For example if I have used an image and I am opening that website then the size of the image, because of that my website can be slow in loading. If I am using gradient then my download time reduces as I am not needed to download anything, for example I don’t have to download any image. Instead of downloading images I am using gradients in the background. So, this saves our download time. It provides a better look to the elements when zoomed because the gradient is generated by the browser means, if I am zooming into the gradient, then my pixel will look good, that doesn’t get blurred as the gradient is generated through the browser, so the look is as it is. If it is hd it will look hd itself, even when we are zooming into it. In the case of an image it so happens that if we zoom into the image the image starts to get blurry. The pixels start to get separated from each other. So, it starts to look light. So, using gradient is better than image, if we are using gradient in the background. It saves our download time and it gives a proper display, it is easy to use and when we zoom into it, we get a proper result. With the help of CSS3 we can generate 2 types of gradients. 1^st is the Linear gradient and the 2^nd is Radial gradient. Same we had generated in html as well but this time we are going to generate it through the CSS, which is easier to generate compared to html code. And as you can see that the linear gradient goes up, down, left, right and diagonally. To create a CSS3 linear gradient, you must have to define two or more colour stops. Means it is important for us to give more than one colour stops and up, then down, then left and right or diagonally. These are 5 ways with us. Up means that, the syntax that we have taken. How do we write this? Background, then linear gradient, after that is our direction which is this up, down, left, right, etc. Colour stop 1 and colour stop 2. Means I have taken in colour stop 1 red and in colour stop 2 I have taken green. So, up means that we have to go from down to up, below would be the red colour and above would be the green colour. If we come down then the red colour will be up and the green colour will be down. Left means the red colour would be on the right and if we are going to the left side, we will get green colour there. And this works in this way. So, here how we can implement the linear gradient that is shown. The colour stops are the colours which are used to create the smooth transition. Imagine that they are using more than one colour. Starting point and direction can also be added along with the gradient. Means I want that my gradient should start from a specific point. Even that we can add. We have seen the syntax. Now we will perform it’s practical so that it is clearer. So, for the practical 1^st we will open the sublime text, html, example linear, in linear gradient this was our theory. The 1^st linear gradient that comes is the top to bottom. Okay. So, top to bottom is our default linear gradient. In top to bottom we don’t have to mention the direction. Like it is written here top to bottom linear gradient is a default. Which is the example we have taken? This is the one. From the red to green we are transitioning. So, we have written 4 lines, but all 4 lines are for different browsers. Like we know that some properties are such that not all browsers support it. And if we want to get that property supported to that browser, so for that we have to add related keywords. Like we have added webkit, o and moz we have added and this is our standard. So, 1^st we will perform with the standard and after that we will add other keywords. So, 1^st of all we have to see our default gradient. So, for that what I will do is, 1^st of all example. My example is top to bottom or I will name it example linear gradient, default, save, linear gradient default.html. This is our program. Okay. So, what do we have to add in the program? We can add a div, we will 1^st of all h3, so that we get to know what is this program for. So, h3 will be our linear gradient, this is our top to bottom, that’s it and we can write in the bracket, default. Now for example we will take one p tag inside this. In p tag we will add that from where to where our transition is happening. Our transition is happening from red to green. Let's say the linear gradient starts at the top. It will show transition from red to green. Okay. This much came to us. Now, what we will do is we will give a division here. Division, in that we will take one id. Since it is gradient so grad1, we will give such name. Okay. Now, we will add style. In style we will 1^st of all take the gradient that we have taken, 1^st of all we will take that. Since this is our id we will add # before it. Now, our division that is there we don’t have to give it width, we will only give it height, 100 pixels. We will not be able to see anything now as we have not added anything. The height is 100 pixels. And now inside that we will take the background, linear gradient, inside the bracket, since it is default, so red, green, okay. We have given the height of 100 pixels, so this is the 100 pixels height. Since we have zoomed in, it looks zoomed. This is less than 100 pixels. If I make it default 100%, so this is my actual 100 pixels. Now, I am zooming into it. Okay. So, this is my 100 pixels. So, at this height my gradient is getting performed linearly. It is default top to bottom, so it is going from top to bottom. And from red my green colour is performing. This is a very simple program to go from red to green. Now, if we run it in different browsers. Now, let's say in our slide you can see that, one is Safari and one is Firefox. In our browser, Firefox is already installed. So, we will open it in Firefox. So, you can see that in Firefox as well our program is properly working. That is the reason we don’t have to add. But, if we want that in all browsers all versions this program should work, for that we will add it and we will write here background. For our Safari we will add webkit, for Opera we will add -o, for Mozilla we will add Moz. Okay. Webkit for Safari, O for Opera and Moz for Mozilla. Given these key words it will also be supported by the older browser’s versions. Only this line is important, the default one, we add the keywords only in this.  So that this works properly in all the browsers. Save. And as you can see this program is working. Okay. Next we will go, after default is our left to right. So, what do we have to do in left to right, se have to define, that we want it in which way, for that what we will do, same program, linear gradient, left to right, copy, starts at the, we will keep the same thing, save. So, this is our linear and it is starting from the left. So, we have to add a keyword here which is our to right, means it is to the left to right, we will add it by default, in our common syntax, to right. In our other syntaxes, what do we have to add? Like when there is O, we have to add only right, for Mozilla also we have to only add right. But in webkit, safari this is not the case, it is opposite. Here we have to add left, since it starts from left. In the rest of the browser we have to indicate in which direction we are going ahead, that we will add. So, here we have added to right, save, here it will come, linear gradient to right. Okay. So, you can see that ours is starting from left and going towards right and we are getting red in left and in right green colour. If we perform the same opposite. Instead of left to right if we want to perform right to left. Here where it is written right we will write left there, and in the safari one we will write right. So this was left to right, now it is diagonal. That means that we are coming down diagonally. So, if we want to come from top to bottom, what will we write? To bottom, like it is written here. For that also we will copy the same program. Diagonally, diagonally, Okay. So, this is our program. Here in the linear gradient what we have to do? When we are performing it diagonally, in that case what we have to do, if we are coming down from up, what we have to write here? to bottom, and here we have to copy the same, bottom and here opposite of this. Left, top, as where will it start from, from the top, so we will save it, linear gradient to bottom, we will run it. So, you can see that we are getting the same result as the 1^st one. That means that we have written something wrong here or there is any keyword that we have not added. So, that we will add. We have not added direction here. Here we have written bottom but after bottom will come, from bottom where we have to go, towards the right side. So we have to go to the bottom right corner. So, we will add it right. So, to the bottom right. So, you can see that the red is from here and here it is green, it is going in this direction. So, if I want to go up, vice versa, so I will write. So, I will write left top or top left, top right. Currently we have performed bottom right. We can even perform bottom left. So, this will come in this direction. So, these are our various gradients, we have seen them in a linear way, from top to bottom, left to right, then diagonally. Now we will come to Radial Gradient. Our linear gradient goes ahead in one direction, from top to bottom, left to right or diagonally. Instead of that we perform radial, which starts from the centre and starts to show up the colours outside. This is exactly like our linear. We have to define the start and last colour. But in this what we have to do is, we have to also add shape, size and position. It basically means what is there in this basically. If we don’t add anything and perform normal gradients. That also will be generated. Otherwise we can even give corners to it. We will see this with an example. Like, the 1^st one is evenly spaced colour stops, means starting from the centre go till our outside width and add simple even colours in each one. So, we can see here in examples, we have taken colours like blue, green, red. We have given width and height, that means a square rectangle is getting generated. In this rectangle we are going to perform this radial gradient. So, we will see how it happens with the practical. So, I am copying this program, for example, radial gradient, we will keep this as it is for now. We will remove this, okay. So, here it will come, radial gradient. We will remove this extra line, we will remove this as well, save. So, this is our radial gradient. So, now what we will do is, in this radial gradient we will add height and width of our division. So, for example I will take the width, 200 pixels, height I will take as 200 pixels. Now I will add a background to it, a radial gradient, now I have to put colour changes in it, which goes from blue to red to green. That’s it. Save and reload. Now, you can see that my square has gotten generated. Since I have taken here the same width and height. In this internally, in the centre, blue, after blue, red and after red, green it is changing. Simple radial gradient. Now, I will add these for the other browsers. Webkit, Opera, Mozilla, this has been added. This is our simplest radial gradient. Staring from the centre and going out. This is done. Now, next is our radial gradient in which we will give different spaced colour stops. Means, in radial we are going from one colour stop to another. But in how much portion do we want it. In the current example every colour is there evenly. You can see here that there is green, then blue, then from here red, then here it will be green. It is even spaced. But I don’t want evenly. I want it to be different. I want that the blue colour should be less visible, red colour should be more visible and green should be visible the most. If I want to perform such a variation in my colours. For that I will use radial gradient but with different space I will add. I will copy the same program here. Example Radial gradient, we will take in this differently spaced and we can add here evenly spaced. Okay. So, what do I have to do here? I have to only add a percentage. So, let's say 5% is blue, then 10% is red and 60% is green. I have added an uneven percentage. Radial gradient, differently spaced.html. So, this is differently spaced but here the colour is not as we want, we are getting it the same. That means that we have written something wrong here. The one that is ahead, we will add it behind. Okay. So, you can see that, the numbers we have to add later, after the colours. The least is our blue, then a little bit of red and then maximum we are seeing is green. So, this was how we can add differently spaced. After that we have a radial gradient. Same thing, but if we want that our radial gradient should not start from here, it should start from any of the corners. For corners also there are keywords applicable, there are properties that we can add. After radial gradient is farthest side at the left bottom, farthest corner at the right bottom, closest side and closest corner. These are the 4 properties available with us. So, what I will do here is, I will generate one more program, for example radial gradient corners, save, radial gradient corners. Now, what we have to do here is, here we will not keep percentages, we are removing this line. Here what is written, background image, is that we are adding radial gradients. So, for this 1^st of all we will generate a program. So, in the corners you can see that, we have added width and height, for gradient one. So, let's say my gradient is one and I want to perform in it. What will I do for that is, let's say I take the width 400, 400. Okay. Now I will add background images with the help of property, radial gradients. So, it should be a radial gradient. After that I will 1^st of all add the colour. For example yellow and red, yellow, the colours are added and now I have to define the corners. In which way it should perform. So, what I will do is, I will take the farthest side on the left. So, in the left farthest side, which is the corner below, from that it will start, save. So, you can see the farthest side, which is my left corner from where it is starting. Here it is only left, here the bottom will also come, save, so from here it will start from the corner and it is going in an upward direction. But this is not diagonal. Since I had to perform it radially, we have taken it in the left bottom point, along with that we have also added the farthest side. So that it increases in this way. Now, I want to perform the same thing but what I will do is, I will start from the right bottom. So, here will come my gradient 2, same thing, we will make it gradient 2. Now will come the farthest side, in place of it will come the farthest corner and to the left bottom we will write as it is, so that we get the difference. You can see that there is more area here as we have taken the farthest side. Here we have taken the farthest corner, so we are getting more gradient here. Since we have taken side, here we are getting more gradient and we are getting less here, radial gradient corner, farthest side, left bottom. We will write this and the same we will add here as well, so that both the gradients look differently to us. Okay, so now we will generate the same thing but this time we will add the closest side. So, here it will come to the closest side. That’s it. Here it is in the corner. Now, on the closest side we will keep 3. This is my 3, now it will come here, farthest corner, in place of this entire term it will come closest side. Radial gradient, closest side. Means we are getting all these sides more here. Now, opposite to it, the closest corner, here 4, so you can see here that we are getting fewer corners. We are getting more of an inner gradient. So, these are our types, how we can define the size of the linear gradients. If we want more gradient on the sides, we can add the farthest corner. If we want more gradients in the corner, we can add their farthest corner. If we want even more on the closest sides then the closest side and if we want more in corners than closest corners. In this way also we can add the gradients. So, these were the various ways, with the help of corners, in different ways, we want to add linearly, we have to add radially, we have to add corners. As per our requirement we can add gradients in our webpage. So, guys our today’s gradient section, in this if there is anything that you have not understood, if you have not understood anything in the practical or in the theory. You can tell us on forums.learnvern.com. But I request that you practice the practical that we have done today on your own, perform it and if you are still getting any questions, even those you can tell us on forums.learnvern.com. We will try to revert to all your questions there with the solutions. Our next topic is on masking. How do we mask the image? Thank you.