CSS Filter Property
- Introduction to CSS filter property
- The syntax of CSS filter property
- Values of CSS filter property
Introduction to CSS filter Property
Filter property is introduced in CSS3 to control the color related properties of elements such as contrast, brightness, blurriness, etc. Mainly, this property is used with <img> elements.
Basically, you can increase and decrease the brightness, contrast, and blurriness of elements through this property. This property gives you some extended capabilities like image editors.
By this property, color shifting can also be done. That is, if you want to show a color image in black and white, then you can do this by using this property.
Functions are passed as the value of this property. A separate function exists for every color property. These functions are also called filters, which you apply on a <img> or another element.
Whenever a filter is applied on an element, then the element passes from the filter function before it is rendered. The color properties of the element are changed by the filter function or simply filter, and after that, the element renders on the webpage.
Syntax of CSS filter property
The general syntax of the CSS filter property has been given below.
filter: none | filter-function;
As you can see in the above syntax, the value of the filter property is passed as either none or as a filter function.
When no value of this property is passed, then no filter is applied. Apart from this, you can also pass the below filter functions in this property.
blur(px)
This blur() function is used to define the blur effect of an image. In this function, value is passed as pixels.
Brightness(%)
This function is used to control the brightness of an image. In this function, value is passed as a percentage.
contrast(%)
This function is used to control the contrast of an image. Its value is passed as a percentage.
drop-shadow (v-shadow h-shadow blur spread color)
This drop-shadow function is used to create a shadow effect of an image. In this function, values like vertical shadow, horizontal shadow, blur, spread and shadow color are passed.
The vertical shadow value is used to define that either the shadow will show in the top or in the bottom. Similarly, the horizontal shadow value is used to define that either the shadow will show in right or in the left.
Blur value defines how the shadow will be Blurry. The spread value defines how much the shadow will spread. The color value is used to define color of the shadow.
grayscale(%)
This grayscale() function is used to apply black and white effects on an image. This function passes the value in percentage.
hue-rotate(deg)
It is used to apply hue rotation on function image. Hue rotation is the rotation done on a color circle. In the form of value, the degree is passed in the function on which you want to rotate the image. The degree at which you rotate, the same color combination is applied to the image.
invert(%)
This function inverts the colors of an image into its opposite colors. This function passes the value in percentage.
opacity(%)
This function can define the opacity of the image. You can also use opacity properties to define opacity.
saturate(%)
This function is used to saturate the image. Its value is passed as a percentage.
sepia(%)
The sepia() function converts image into a black and brown combination. Its value is defined in the percentile.
url()
This function is used to filter SVG elements. This function passes the address of the XML file that will filter the SVG element.
Example of CSS filter Property
The below CSS filter property has been explained by a simple example.
<!DOCTYPE html>
<html>
<head>
<title> CSS filter Property Example </title>
<style>
.imgBlur
{
filter: blur(5px);
}
.imgBrightness
{
filter: brightness(100%);
}
.imgContrast
{
filter: contrast(50%);
}
.imgDrop-shadow
{
filter: drop-shadow(5px 5px 5px red);
}
.imgGrayscale
{
filter: grayscale(100%);
}
.imgHue-rotate
{
filter: hue-rotate(180deg);
}
.imgInvert
{
filter: invert(100%);
}
.imgOpacity
{
filter: opacity(25%);
}
.imgSaturate
{
filter: saturate(500%);
}
.imgSepia
{
filter: sepia(100%);
}
</style>
</head>
<body>
<h1> CSS filter Property example </h1>
<img class="imgBlur" src = "images/mbh-logo.png">
<img class="imgBrightness" src = "images/mbh-logo.png">
<img class="imgContrast" src = "images/mbh-logo.png">
<img class="imgDrop-shadow" src = "images/mbh-logo.png">
<img class="imgGrayscale" src = "images/mbh-logo.png"><br>
<img class="imgHue-rotate" src = "images/mbh-logo.png">
<img class="imgInvert" src = "images/mbh-logo.png">
<img class="imgOpacity" src = "images/mbh-logo.png">
<img class="imgSaturate" src = "images/mbh-logo.png">
<img class="imgSepia" src = "images/mbh-logo.png">
<style>
.imgBlur
{
filter: blur(5px);
}
.imgBrightness
{
filter: brightness(100%);
}
.imgContrast
{
filter: contrast(50%);
}
.imgDrop-shadow
{
filter: drop-shadow(5px 5px 5px red);
}
.imgGrayscale
{
filter: grayscale(100%);
}
.imgHue-rotate
{
filter: hue-rotate(180deg);
}
.imgInvert
{
filter: invert(100%);
}
.imgOpacity
{
filter: opacity(25%);
}
.imgSaturate
{
filter: saturate(500%);
}
.imgSepia
{
filter: sepia(100%);
}
</style>
</head>
<body>
<h1> CSS filter Property example </h1>
<img class="imgBlur" src = "images/mbh-logo.png">
<img class="imgBrightness" src = "images/mbh-logo.png">
<img class="imgContrast" src = "images/mbh-logo.png">
<img class="imgDrop-shadow" src = "images/mbh-logo.png">
<img class="imgGrayscale" src = "images/mbh-logo.png"><br>
<img class="imgHue-rotate" src = "images/mbh-logo.png">
<img class="imgInvert" src = "images/mbh-logo.png">
<img class="imgOpacity" src = "images/mbh-logo.png">
<img class="imgSaturate" src = "images/mbh-logo.png">
<img class="imgSepia" src = "images/mbh-logo.png">
</body>
</html>
The above example will generate the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.