About CSS3 Filter Functions
Posted By : Vikas Pundir | 19-Mar-2018
In this Blog we'll introduce some filter effects of CSS3 like a blur effect, balancing brightness or contrast effect, color saturation effect etc. you can perform these all visual effect operations on images and other graphical elements onto the web page. Using the CSS3 filter property you can apply filter effects on the element, in the order provided accept one or more filter function.
The CSS3 Filter Blur Effect:
In Photoshop we use some blur effect like Gaussian blur effect directly on an image, But now we can be applied CSS3 Filter Blur Effect to an element using the blur() function. For defines the blur radius this function accepts CSS length value as the parameter. Create more blur effect on an element we will define a large value. If the value 0 is used so it means no parameter is provided.
HTML Code For Filter Effects:
<body>
<table>
<tr>
<td>
<img src="/examples/images/img.jpg">
</td>
<td>
<img class="blur" src="/examples/images/img.jpg">
</td>
<td>
<img class="extra-blur" src="/examples/images/img.jpg">
</td>
</tr>
</table>
</body>
CSS Code:
img.blur {
-webkit-filter: blur(2px);
filter: blur(2px);
}
img.extra-blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
table td{
padding: 10px;
text-align: center;
}
Setting the Image Brightness:
To set the brightness of an image we can be used the brightness() function. We set the value of 0% to create an image will be completely black.
For better results in the brighter image, we can also set the brightness higher than the 100%. A value of 1 is used, If the amount parameter is missing. In Brightness effect negative values are not allowed.
CSS Code:
img.bright {
-webkit-filter: brightness(200%);
filter: brightness(200%);
}
img.dark {
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
Adjusting the Image Contrast:
Adjust the contrast on an image the contrast() function is used. Here also if the value is 0% so the image will show black. For results with fewer contrast values over 100% are also allowed. A value of 1 is used, If the amount parameter is missing.
CSS Code:
img.bright {
-webkit-filter: contrast(200%);
filter: contrast(200%);
}
img.dim {
-webkit-filter: contrast(50%);
filter: contrast(50%);
}
Adding Drop Shadow to Images:
For drop shadow effect on an image, you can use the drop-shadow() function like Photoshop. The box-shadow property is similar to this function.
CSS Code:
img.shadow {
-webkit-filter: drop-shadow(2px 2px 4px orange);
filter: drop-shadow(2px 2px 4px orange);
}
img.shadow-large {
-webkit-filter: drop-shadow(4px 4px 10px orange);
filter: drop-shadow(4px 4px 10px orange);
}
Converting an Image to Grayscale:
Using the grayscale() function you can be converted images into grayscale. If the value is 100% so the image will completely grayscale. Leaves the image unchanged on the value of 0%. A value of 0 is used, If the amount parameter is missing.
CSS Code:
img.complete-gray {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
img.partial-gray {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vikas Pundir
Vikas has a good knowledge of HTML, CSS and JavaScript. He is working as a UI Developer and he love dancing and painting.