Wondrous CSS filters
They are awesome
CSS filters have too many possibilities and the reason why is because CSS filters can use SVG filters as well, and this makes them so much powerful.
Filters are mostly misunderstood as properties only to change some colors or give some blurry effect, but they are so much more than that! Let's see them in action.
What are they? #
In a nutshell, they are a bunch of functions applied with the
filter property, to change things like opacity, brightness, contrast and also apply some cool masks like sepia, which you will see later on in this article!
That was me and my father :) . Okay,getting back to filters...
filter property can have these functions as values, other than initial, inherit and none :
Some of these are self-explanatory, like blur, brightness, grayscale,opacity, etc. But let's look at each of them.
So the original image looks like this:
Takes a length value, like px, em, rem as the radius for the gaussian blur applied to the element.
Takes numbers and percentages as arguments. Percentages more than 100% brighten the image, and less than 100% darkens it. Play with it and you'll understand better.
Saturation defines the intensity of the colors in an image.
This function saturates/desaturates the image, takes a number or a percentage and values greater than 100% saturates the image, and less than 100% desaturates it.
Yep, you guessed it right. This function rotates the hue of the element, and takes values in "angles".
Let's just assume now that all of these functions take either numbers, angles or percentages as arguments, and filter the elements accordingly.
Changes the contrast of an image, takes numbers or percentages as inputs.
This one is like the elder brother of
box-shadow always gives us a rectangular shadow, but if we want a shadow which feels real, we can use this filter. Hover on the SVG to see the effect.
This is one function which gives greater power to our CSS filters, as this takes the url of an SVG Filter which is a compelety different topic, and not in the scope of this article. But, just understand that it applies SVG filters by getting a url to the SVG file, or the ID of the inline SVG filter in HTML. It brings in many possibilities.
Animating filters #
They are animatable, so you can do this:
So that is all for CSS filters, they are relatively new, and as IE is gone (sigh), support is good enough.
- Previous: The Holy Grail of CSS Layouts