{"id":1397,"date":"2022-05-25T12:10:30","date_gmt":"2022-05-25T12:10:30","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=1397"},"modified":"2022-05-25T12:10:32","modified_gmt":"2022-05-25T12:10:32","slug":"css-filter","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-filter\/","title":{"rendered":"CSS Filter"},"content":{"rendered":"<p style=\"text-align: center;\"><strong>CSS Filter Property<\/strong><\/p>\n<p>Whenever we click pictures on our mobile phones, we can put some filters onto the images, as the visual effects, for doing things like making the image black and white, increasing or decreasing the brightness, and contrast, or making the image blur, and some more things. Similar to this, we can do these things here as well, on some element (usually an image).<\/p>\n<p>Here, using the filter property, we can put some different visual effects on the element (usually an image)<\/p>\n<p>So, now let&#8217;s have a look at some different visual effects that we can have here &#8211;<\/p>\n<ul>\n<li>blur() \u2192 With this function, we can make the element(usually an image) blur by a given pixel amount.<\/li>\n<li>contrast() \u2192 With this function, we can adjust the contrast of the image.<\/li>\n<li>brightness() \u2192 As the name says, this function helps us adjust the brightness of the image.<\/li>\n<li>grayscale() \u2192 The function helps us to convert the image to grayscale.<\/li>\n<li>opacity() \u2192 This function helps us set the opacity level for the element(usually an image)<\/li>\n<li>saturate() \u2192 This function helps us saturate the image.<br \/>\nAnd some other visual effects are there as well.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1399 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter.jpg\" alt=\"\" width=\"811\" height=\"451\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter.jpg 811w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter-300x167.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter-768x427.jpg 768w\" sizes=\"auto, (max-width: 811px) 100vw, 811px\" \/><\/p>\n<p>As you can see, we have some different images, belonging to different classes, which contain filters, like a blur, contrast, saturation, etc. These classes are applied to the different images(basically, it is the same image every time! lol). But, we get to see the different filters over the images. Have a look at the output of the program &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1398 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter-1.jpg\" alt=\"\" width=\"1023\" height=\"435\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter-1-300x128.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Filter-1-768x327.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/p>\n<p>As you can see, the different filters are applied to the images. You can also try these different filters, and use them as per your requirement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Filter Property Whenever we click pictures on our mobile phones, we can put some filters onto the images, as the visual effects, for doing things like making the image black and white, increasing or decreasing the brightness, and contrast, or making the image blur, and some more things. Similar to this, we can do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,13],"class_list":{"0":"post-1397","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=1397"}],"version-history":[{"count":2,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1397\/revisions"}],"predecessor-version":[{"id":1474,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/1397\/revisions\/1474"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=1397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=1397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=1397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}