Coder Camps

Blog

CSS Filter Effects

Post

CSS Filter Effects

It's known that CSS is used to describe the presentation of a document written in a markup language, which in English means that it's defining the styling rules within your web page. However, there are a lot of features within CSS that the casual developer are unaware of. One of those features are CSS filters. These filters provide you with ways of modifying an image or video quite easily with basic CSS knowledge! If you were ever looking for a simple way to warp, blur, or modify the color of videos or images, this is definitely the way to go if you're trying to avoid programs like Photoshop or Gimp. 
 
What filters are available?
Currently as this is being written, there are 10 available to be added to your next project. They are the following: blurbrightnesscontrastdrop-shadowinvertgrayscalehue-rotateopacitysaturate, and sepia. Since I don't want to take up your whole day, we're going to cover just a few in this blog post. We'll be taking a look at blur, grayscale, and hue-rotate. As an added note, you'll see several filter properties defined within my declarations in the examples, this is because you have to specify a prefix for different browsers in order for them to appear correctly everywhere.  So, let's jump right in and get started.
 
Blur Filter
This property is is going to do exactly what you might think, blur out the image depending on the unit of pixels that you plug in.  Which means the higher the amount of pixels you plug in, is how strong the blur effect shall appear. Take a look at the example below to see this effect in action!
 
 
Grayscale Filter
This property is going to define a black and white visual effect on an element. Unlike the blur filter, this filter is going to take a percentage as a value. 100% is the maximum value, which gives the complete black and white effect, but it's up to you to decide how much you wish for this effect to take hold on your element. Below you'll see that I applied a 50% value, which still slightly shows the color of the image.
 
 
Hue-Rotate Filter
Our final property is going to shift an elements relative hue. The value we plug in will be a number of degrees  and is representing a wheel of hues. 0deg being the default, original image and 360deg being the maximum value you can apply. Notice when you hover over the image below, it gives it a greenish color in appearance. 
 
 
Wrapping things up
So as you can see by these few examples, filters provide a quick way of altering an element to give a nice effect. It's quick, easy, and very simple to learn. One final thing I'd like to point out is this is supported by almost every modern browser. (Except with the exception of Internet Explorer. But even then, there are workarounds!)