WHAT IS CSS FILTER EFFECT? WHY IT IS SO USEFUL NOW-A-DAYS?

The CSS filter effect is a strong weapon for the designers now-a-days.You can achieve interesting visual effects through it. This CSS property provides various effects like blur or color shifting on an element before the element is displayed.
It’s commonly used to adjust a background, rendering of an image, or a border.
The idea was originated by Robert O’Callahan (from Mozilla) from Scalable Vector Graphics (SVG) specification. It was created in a vector drawing by applying a number of different pixels based image.
Through Robert’s idea the SVG filters through CSS application came up with normal HTML content.

HOW IT WORKS:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() – for applying SVG filters
• custom() – “coming soon”

HERE IS AN EXAMPLE TO USE THE FUNCTIONS:

For single filter use:

blur-it {

filter: blur(10px);

}

For multiple filter use:

.use-more {

filter: blur(10px) grayscale(10%);

}

grayscale()

filter: grayscale([ <number> | <percentage> ])

BROWSER SUPPORT:

Chrome

31+ (-webkit-)

Safari

7+ (-webkit-)

Firefox

35+

Opera

18+ (-webkit-)

IE

nope

Android

4.4+ (-webkit-)