The long awaited CSS3 Filter property was recently landed in webkit, currently it’s only supported in Chrome (18.0 +) and Safari (5.1 +) with the -webkit- prefix but surely other browsers will join to support the filter property. Now let’s look at what is the CSS3 filter property, how the syntax looks and how to use it.
The CSS3 filter property
With the CSS3 filter property we can easily accomplish effects like blur, grayscale, sepia, contrast and many more. These filter properties can be applied to any HTML element or image. The filter syntax is simple and looks the following:
As you might expect browser prefixes are required. The filter syntax with the browser prefixes looks the following:
Note: Multiple filters can be applied to any element or image, simply use a space. Example:
filter: blur(5px) grayscale(100%);
I think it’s easier to understand the filter property through visual examples. So, I will be applying the filter properties to an image to demonstrate how they work.
The original image looks the following:
Ever wanted to add a Photoshop like blur effect to an image just with CSS ? Now you can with the blur property. Blur is measured in pixels, so a larger value will create more blur.
The brightness value specifies how bright the element should be. You can specify the brightness with percentages or with floating point number.
With the saturation effect you can make the images look more vivid and funky. The saturation is measured by percentages. Note: Make the value greater than 100% to really see the saturation effect.
It’s a quite interesting filter effect, this effect rotates the colors (imagine a wheel of colors which you then rotate) to the specified degree. It’s measured in degrees.
If we add 100% as a value output will look like a photo negative. As you probably realized it’s measured by percentages.
This is my favorite filter property of them all. The ‘amount’ applied controls how much gray conversion is applied.
Measured by percentages. A 100% ‘amount’ makes all the colors completely sepia toned.
Adds more contrast to the images. Measured by percentages, the default value is 100%. By applying 0% the image will be completely black, greater than 100% adds more contrast.
Opacity & Drop-shadow filter properties
According to an HTML5 Rocks article, the CSS3 filters are fast and will run really quickly on any platform and have very minor performance impact. The only filter properties you should care about are blur and drop-shadow. Since the drop shadow effect can be easily accomplished with the CSS3 box-shadow property I think it’s smarter to use this property instead of drop-shadow while the performance is bad. With the blur property we are not so lucky we have to use it to make cool effects but one thing needs to be considered the more you increase the value of the blur the more inefficient will be.