CSS filter Effects: blur, grayscale, brightness, etc.

Filters are originally part of the SVG specification. However, as the use of filters becomes more widespread, the consortium also begins to add some common filter effects to CSS. CSS filters are powerful and useful, and you can use them to blur, lighten, or saturate to adjust the image. These filters can be used separately or in combination with other filters, and the CSS syntax for the filters is this:

Filter: <filter-function> [<filter-function>]* | None

Let's start with a brief introduction to these filters.

Brightness

The filter controls the brightness of the image. It can accept a value greater than or equal to zero as its argument. A value of 0% will become black. A value of 100% is the original image. You can specify a value greater than 100% to get a brighter image. For example, a value set to 300% will turn the image to 3 times times brighter:

img {filter:brightness (300%);}

Contrast degree

The filter controls the contrast of the image. Ditto, it can also accept values greater than or equal to zero. The filter controls the difference between the dark and light portions of the image in the CSS. So the result of a value of 0% is to get a gray image. A contrast value of 100% is the original image, which will further improve the contrast of the image after this value:

img {filter:contrast (0%);}

Gray

As you can see from the name, the filter can make your image grayed out (black and white). The filter converts the colors of all images to grayscale values. A value of 0% does not affect our image, and a value of 100% turns them into black and white, which is not allowed to be negative.

img {filter:grayscale (100%);}

Saturation degree

The filter controls the saturation of the image. A value of 0% will completely remove all colors from the image, and the saturation of the image will increase when the duty exceeds 100%. A value of 100% is the original image and the value is not allowed to be negative.

img {filter:saturate (0%);}

Brown-Brown

This filter will add a dark brown hue to the image as some old photo styles do. The amount of dark brown added depends on the percentage value. A value of 0% is the original image, and when it is 100%, the image is completely brown.

img {filter:sepia (100%);}

Tonal swap

This filter will swap all colors of the image. The degree to which the color is reversed depends on the value of the specified parameter. When the value is 0 degrees, the image remains unchanged. Although the filter does not have the maximum value, the effect of exceeding the value above 360 deg is recycled. That is, the two values of deg and 450 deg will have the same effect.

img {filter:hue-rotate (90deg);}

Anti-color

This filter will turn all the colors of the image back. The amount of the inverse color depends on the value of the parameter. A value of 0% does not have any effect on the original image, and is completely reversed when the duty is 100%.

img {filter:invert (100%);}

Fuzzy

This filter applies to Gaussian blur images. It spreads the colors of each pixel together and spreads to the periphery of the adjacent edges. The RADIUS parameter set by the filter determines how many pixels on the screen will be connected, and the larger the value will blur. This filter can accept any length value except the percent value.

img {filter:blur (1px);}

Opacity

The filter will make your image translucent. The image will be completely transparent when the value is 0%, and 100% remains intact. The filter is similar to the usual opacity property. The difference between the two is only slightly different in performance, and the filter has better performance in some browsers that support hardware acceleration.

img {filter:opacity (75%);}

Shadow

As the name suggests, this filter adds a shadow effect to the image. It's basically a blur to the alpha mask of the input image, and the offset is the color you specify. This property requires the x-axis and y-axis offset values, and the color values of the shadows. You can also set a blur radius value, which determines whether the shadow is sharp or blurry.

img {filter:drop-shadow (5px 5px 10px #666);}

URL ()

While these filters are useful, they are all generic and you may need more customization effects on your project. If the filter above does not meet your needs, you can create your own SVG filter and use the URL () to refer to the filter by its ID.

  <svg style= "Position:absolute top: -99999px" xmlns= "Http://www.w3.org/2000/svg"
<filter Id= "Greenish"
  <fecomponenttransfer>
    <fefuncr type= "linear" slope= "2" intercept= " -0.5"/>
    <FEFUNCG type= "linear" slope= "2" intercept= "-0." />
    <fefuncb type= "linear" slope= "2" intercept= " -0.25"/>
  </ Fecomponenttransfer>
</filter>
<filter id= "bluish"
  <feComponentTransfer>
    <fefuncr type= "linear" slope= "2" intercept= " -0.5"/>
    <FEFUNCG Type= "Linear" slope= "2" intercept= " -0.1"/>
    <fefuncb type= "linear" slope= "2" intercept= "0 "/>
  </fecomponenttransfer>
</filter>
  </svg>

<style type= "Text/css" >
IMG {
Filter:url (' #greenish ');
}
</style>

Combining and animating filters

You can also combine multiple filters to create a variety of effects. In most cases, the order of the filters is not much of a relationship, but some filters will be overwritten by some other filters in the order in which they are in your CSS. For example, using a grayscale filter and then using a dark brown filter will end up with only one brown image, and a grayscale image if the order is reversed.

Filters can also become animated. By setting the animation correctly, you can create some very interesting animation effects. Take this as an example:

IMG {
animation:haunted 3s infinite;
}

@keyframes Haunted {
0% {
Filter:brightness (20%);
}
48% {
Filter:brightness (20%);
}
50% {
Filter:sepia (1) Contrast (2) brightness (200%);
}
....
96% {
Filter:brightness (400%);
}
}

In the above code, multiple filters with different values take effect during the animation.

Add

Although the filter is depicted outside the box model of an element, it has no effect on the geometric structure of the element's box model. Remember that filters affect everything in the target element, including: background, borders, and text decorations. You can also use filters in video and inline frames. The following demo illustrates this concept. More examples can be viewed on the website of Bennett Feely ' s.

Iframe

All of these filters are great and perform well, except for Blur filters, which can be slow if your browser does not support hardware acceleration. The performance of the URL () filter depends on which SVG filters you use.

The Filter property is supported by all major browsers. Chrome and Opera require the prefix version of this attribute to be used together. The filter does not support IE, but the Edge can be partially supported, which is supported except for the URL ().

Conclusion

This post is for developers to explore a number of CSS filter features. They have good browser support, ease of use, and better performance than canvas scenarios. In addition, as I mentioned above, you can also use video as well as with other elements.

If you have a better way to use the filter, please leave a message for me or ask your question.