Image filter property in CSS

Hello guys. Welcome to our CSS series. In our last segment, we had seen about CSS image property.  Image property means the image that is there, how we can convert that image into thumbnail or we can play with the image in different shapes, like showing up the image in square, giving it borders, giving it curve borders or converting the image into circle and we have also seen how we make the images responsive. Overall, in the last segment we had worked with the images, we had seen how we can use CSS properties in different ways and change the images. Our today's segment is on CSS filters, usually we get a question about what are filters? If you're using a smartphone, our camera that is there inside our phone, in those various types of filters we can see, we can play with a lot of images, increasing the brightness, reducing it, adding the shadow, etc we do using the filters. The same thing that we do through phone cameras on our images or videos. That same thing we can do on images through CSS filters. Okay, guys! So, in our today's segment, we are going to see about these filters and how we can use these filters through CSS. Like it is written here, CSS filters are used to set visual effects to text images and other aspects of a web page, meaning our text image or any other entity which we have used over that with the help of filters we can add visual effects to it. Okay! The CSS filter property allows us to access the effects such as colour or blur, shifting, rendering, etc, means adding the colour, removing the colour, blurring the image, if it is on the left shifting it to the right, if it is on the right shifting it to the left, changing the direction, rendering it to somewhere else, all these things which are there we can do it through CSS filter property. got it? Here a few examples have been given, it is given in the syntax, filters and after that a lot of properties have been given here like none, invert, drop shadow, brightness, saturation, blur etc. So, we will check all these filters one by one today. So, the first one today is brightness, brightness means that our element which is there, let’s say image is there or text.  To make it brighter, to increase the lighting effect, we make use of brightness. Here the brightness value is always given in percentage, like it is mentioned here. If we have passed 0% value in brightness, it will give us a completely dark image. If we have given 100% light, the brightness will increase a lot and it will come in total light effect. So, here as a user we have to identify how much brightness we require between 0% to 100%. So, if we do it with an example. We will open the sublime text; HTML, example of filters, we will save it, filter.html. Here the filters which are there like brightness, hue and saturation. We are going to check them all. For that we will take one image. So, here I have two images available with me. There is an image in which few patterns are made and the other one is of learnvern.  I will use the learnvern image.okay! Here, image, images, learnvern.png, save. This is my programme filter. So, here my image is shown, I will centre align this image first, for that; style, inside the body, text align centre. So, my image has come to the centre. So, now, my first task that is there, this image is looking as default somewhat in this type. Now, we will be applying different filters on this image. So, we will add a heading over this image's main image. Main image. So, here we have a main image.  Now, I will add something else here like, for example, I want to perform the brightness, so I will add here h3, image with brightness, filter ; I will use the same image over here, in the image we will add the class ; img brightness, copy, on this class filter; brightness. So, now we have to check the brightness here. So, first of all with 0%, We will check the brightness. So, you can see here that image with a brightness filter, we are getting a totally black coloured image. If we increase it little by little.okay!  Let’s say I take 10% here, I am able to see a little bit of the image here. If I make it 30% a little more image is visible, if I make it 50% then I can almost see the image, if I make it 70% we are able to see the image, if I make it 100%, this is my image in which more lightning effect has been added. So, this is our learnvern’s logo and this is our image, compared to the previous image this is looking a little lighter. got it?  If we do the same thing on other images. So, our image’s name is image. Jpg. Okay. So, here we will give this image width of 200.(pause) Okay. So, this is our image, we will make it a little smaller, 100. So, here we have two images, here we have already passed the brightness of 100%. So, we are getting this much brightness. Let's say if I give it 200%. So, my brightness is increasing, it means how much of a percentage we keep on increasing, that much our image brightness will keep on increasing. So, we have made it 500. So, the brightness of the image is increasing. So, when we have taken a dark image, we are getting a proper result that is available here. So, this is our main image and this is our image with a brightness filter. We will make the program a little more proper. We will take one div, class, main image, in this our… (pause) so this is our main image and this is the image with a brightness filter. Now, we will take the same thing in div. We will give it a class. (pause) And here will come image brightness, img. Like this div we will generate one more class. We will generate one more div. So, we will now go to the slide that was our brightness. Brightness is used to increase the lighting effect in the image. got it? Now,  Next is Blur. Blur is to add the blur effect. Blur effect means in Hindi the image looks dhundli. To make the image from normal to blur. Means to add a blur effect to it we make use of the blur effect. The value that is there, it is normally if we have not defined anything in that case it is used as zero as a default value. In this we pass the values in pixels. Guys, in brightness we had passed it in percentage. Here, the percentage is not acceptable, in blur we have to pass the values in pixels. Clear! So, let's say I have the same image, so I will write here, image with blur filter. So here image; blur, I will make use of this class and in we'll add filter, blur, as we have seen that our default value is zero. So here when I pass it, I'm getting the image as it is. Means I am getting it from zero. We will do one thing, to increase its blurriness, I will take the value 10 pixels.  So, you can see that our image is looking a little blurry, our image is quite blurry. If in place of 10 px if I make it 1px. So, we will get a little light blur than 0(zero). If I remove the px, there is no effect.  Means for us, adding px is mandatory. clear! We have to provide values in px only. So here I can make it; one px. Now, if I increase it, let’s say 3px. As and when I will increase the pixel value, my image will increase the blurriness. So, this was our blur filter. We will do something so that the div gets adjusted next to each other. Let’s say I will take here, image brightness. I will take one more class; div, or we can give common to every division. To this class we will give width, let’s say 200 pixels. Okay, so 200 pixels is our division and this is our div.  (pause)  Filter effect name, is a class we will make, display, inline-block. Here we'll add a div, save. Okay our image will be seen next to each other with different filters, Okay. Next, we will take…this was till our image blur. Now, we will apply the next filter, after blur comes invert. Invert is used to invert our image. Like it is written here, 100% value means a completely inverted image and 0% value leaving the unchanged input means you will get it as it is. Got it? So, for that we will apply input over here, invert, okay. In this we will add… filter, invert, like it is mentioned here 100% means completely and 0% means leaves changed input. We will save it. Okay. So, we are getting the image over here, image with an inverted filter. Here we are getting colour differences available. We can see that we have to give the values in percentage. So, here I will give 20% value, reload. So, there is a little bit of difference in colour. If I give an inversion of 50%, a lot of grayscale is getting added. If you give it 100%. So, this is the value that we are getting. 0%-100% is giving almost the same output, as and when we reduce or increase it, in that way we're seeing its output. clear! Means in the colour adding the grey scale. Grey scale is our one more filter. But to remove our filter and to add greyness in it we make the use of invert. If I am keeping it 20%, you can see that my colour is almost close to the mean. If I keep it 1%, we will get a little less than the original image. To make the colour dull, which property do we use? We use the filter property.Got it, guys! Next, we will see, after the image inverted, it is saturated. To increase the saturation, to give it sharpness we usually use it. Here it is written to decide the saturation of an element, the 0% saturation represents completely unsaturated. Whereas 100% saturation represents the original one. means For the image to be as it is 100% and to make it completely saturated, 0%. The values greater than 100% allows super saturated results. We cannot use negative. Okay. So, we can go above 100 as well. But above that we will get more saturation. here, we will take saturation. Image saturation, image width, saturation filter. We will copy this class…. filter, and saturate. We will start with 0%. So, we are getting a saturated image here. There is a lot of black colour in the image. 100 means the image is as it is. So, this is looking like our original image. As and when we will keep increasing it, it will reduce accordingly. If I make it 20%. We are seeing a lot of dull blackness, if we make it 50, we are getting a little less saturation.And, If we make it 90, we will get close to the original colour. This is a saturation filter. Then comes, except for percentage the values are acceptable here. As soon as I remove 90, okay. We are getting colour here. We are giving the values other than the percentage, saturation. If I make it one. I will make the original image almost 10. The redness has increased. If I make it 50, the redness has increased. If we make it 80, we are getting a red image to a big extent. Here if you see there are 2 values available, one was in percentage and one was in values. So, I am adding values in percentage. So, we are getting nearby to the original image. But black colour is increasing in this. Means in the colour our saturation is increasing. Okay, clear!  But when we increase the values in this, lets say, 1, 2, 3, 4. So, in our saturation, redness is increasing. So, this is our saturation filter. Then comes our drop shadow. Drop Shadow is almost like a shadow effect. It is written here, it applies the drop shadow effect to the input image, the values it accepts are h shadow, v shadow, blur, spread and colour. Like it was in our box shadow property, horizontal, vertical, blur, spread and colour. Similarly, our Drop Shadow property is coming. We will add one more division here; drop shadow, filter, drop shadow. Now, here initially we are not adding anything and we have loaded our image. So, we are getting our image as the original one. Now, inside this, 1 pixel, 1 pixel, 0 pixel, 10 pixel and for grey colour, let's say we take grey colour. So, this is our image. In this we are not able to see any special shadow. Let’s say as per the example we have… we will add yellow colour. Okay so you can see a faint yellow line here. We will increase our 1 px to 10. So, we are able to see one yellow colour shadow. If I add our grey shadow here. Okay. So, here a slight yellow colour is still coming, save. We will add the blur effect. So, you can see that our drop shadow accepts only 3 values, here 4 values are not accepted. got it?  So, here we don’t have a spread. We have only a blur effect. So, our shadow is giving us horizontal, vertical, blur. Spread doesn’t come in drop shadow and our colour. So, you can see that in grey colour we are also getting the shadow effect. Clear guys, so, Next is our contrast. It adjusts the contrast of the input. It’s 0% value will create  a completely black image whereas the 100% value leaves the unchanged input. Means to make the image black, increase and decrease the contrast, we make use of the contrast filter. So, let’s say we will add contrast here.(pause) You can see in the slide that we have to add the value in percentage. Let's say if I give 100%. So, we are getting the image here as it is. If I give 0% here, totally grey, I am getting the image in high contrast. If we make it 50, we are getting a little medium level contrast. So, this is our contrast filter to increase and decrease the contrast. Even the contrast, we add in percentage. okay, guys!  Then comes the opacity. Opacity is such a filter, which we use the most. Opacity is given in 2 ways. Like you can see here, we can give opacity after the filter and opacity itself is a property value. With that also you can give it. What is opacity? To add transparency, we make use of opacity. In this as well, we give 0 to 100% value. When we are using only the opacity property in that case, we give the values in number rather than in percentage. We will see both the examples here. So, we will take here image, opacity, here comes our class, filter, opacity.  First of all we will start from the 0%. You can see that we cannot see the image here. Which means it is highly transparent. If I make it 100, I am seeing the image as it is. If I make it 80, we are getting a light transparent image. Little more, transparent with 50%, when I make it 30%, it becomes more transparent. Opacity we use the maximum when we want to make the image transparent. Opacity works even without the opacity filter. For example, image, opacity without filter, filter. So, we will take this class. So, in this case we have to give the opacity in this way. Opacity, then we pass it between 0 to 1. For example, if I give 1, it will be fully opaque. You can see that there is nothing transparent here. If I slowly reduce it. I make it 0.8, so we are getting a slightly transparent image. If I make it 0.5, a little more, I make it 0.3, a little more, it is almost the same output. And if I make it 0, our image gets totally transparent, which means it disappears. clear?  So, if we want to show a light image, then 0.1. If we want to give half transparency then 0.5. So, we have 2 options available for opacity. We can use opacity as a filter or directly the opacity property that is available through CSS, we can even use that. So, this was opacity, to make the image transparent. Okay, guys! Then comes the hue rotation. To apply hue rotation, like it is written here, it's perimeter value defines the number of degrees around the colour circle means like when we were learning about the colours, about CSS colours, at that time we had seen the colours in RGB, then we had seen it in HSC as well, hue saturation and in lightness. After that comes the colour code. In that also we had seen. So, the different colours that we had seen, in that h which was there in h s l a, h stands for hue. And like we know that hue means, like if we consider a circle, 0 represents the red, then 120 represents the green colour, 270 represents the blue colour, in between as we go ahead of 0, 1, 2, 3, as and when we get different colours available to us. So, based on the hue, we can adjust the colour using a hue rotate filter. So, we will see how the hue rotation works. If I take here an image hue, taking one class, hue rotate filter. .Img-hue(dot image hue), image. Here it will come, filter, hue-rotate. If I take 0 here, like it is mentioned 0 degree here. If I load it. We are getting the image as it is. If I take 120 here. Then we get the colour on the 120th, that is green colour. So we are getting the image in light green colour. If I take 270 here, the colour blue colour will increase. We are seeing the blueness. If in this place I take 360, so we are getting as it is. Let's say I only take 100 here. Our greenness is increasing. So, you can see here that it’s default value is 0 degree, which represents the original. It’s maximum value is 360 degrees. As much as hue, we will add, our images colour will change accordingly. So, hue rotate filter comes to us. This is our grayscale image. Grey scale means make the image totally black or make the image totally white. This we can do with the greyscale. Here it is mentioned, 0% grey scale represents the original one. 100% represents a completely grey scale. It converts the object colour into 256 shades of grey. It means that we have in total 256 shades of grey available with us. So, if we start from 0 and we go till 100. In between 0 to 100 how much ever grey colour shades we get. Those will be set here. That value also we will give in percentage. For example, we take image- gray scale class after image hue. And here our 1^st value was 0% means original, we will start with 0% itself. Here our image is coming in grey scale. As it is 50, if we make it, we are seeing the image a little bit in grey colour. If I make it 100. In my image the grey colour is increasing a lot. Our brown colour pattern is getting converted into a grey pattern. So, to increase the grey colour in the image we make use of grayscale. Okay, guys!  At the end comes our sepia. It is used to transform the image into a sepia image. 0% value represents the original image, whereas 100% indicates completely sepia. What are the effects of sepia, that we will see through the practical. Image, sepia. All the filters that we are seeing today, all these filters are available in our phone camera. If you want to check the effects, you can check it in your phone camera.(pause)  First of all we will see that, even here we have to give the values in percentage. Let’s say, I will take 0%. We are getting the original image here. If I increase it and make it 50. You can see that there is a slight change in our image. If I increase it and make it 100. The yellowness of the image is increasing. If I add a 500% sepia filter. As and when I am increasing, the yellowness of my image is increasing. Okay, you can see that after a certain level the yellowness does not increase. In the image, yellowness, which means to add the sepia filter we make use of sepia. So, these are today's filters. When we work with the image, these filters become very useful. The most useful filter is the opacity filter. With the help of opacity we make the image or the text transparent. So, guys, today's section or segment we have covered different filters. It comes to use with the images. I request that whichever filters are used with the images today, that you try on your own and perform the practical. When you will perform it on your own. You will get to know what is the use of which filter and what is it’s difference with the comparison to other filters. So, you perform the practical. If you have any question, doubt or query. You can tell us on forums.learnvern.com. We will answer all your questions. In our next segment we will see about CSS colours.  What are these colour properties and how do we use them? We have already used colour properties but we will get the deep knowledge of it in our next segment. Thank you.