With all the buzz around CSS Custom Filters, you’re hopefully aware of all the cool effects you can play around with in Chrome Canary using our CSS FilterLab. While we have to wait for CSS Custom Filters to hit mainstream browsers, you can use CSS Filter Lab to play with built-in CSS filters already available in most WebKit browsers today, including Chrome, Safari, and even Mobile Safari on iOS6. These come to us from the world of SVG, where built-in filter shortcuts could be applied to SVG elements, but we will focus on the CSS specification here. Built-in filters are easy to use by simply applying the filter property and using a filter function, which accepts a value as a parameter. This is very similar to how CSS Transforms work. You can even apply multiple filters in the same filter property, the same way you can apply multiple transforms. In these examples, I will be using the un-prefixed filter property, but current release versions of Chrome and Safari use the
-webkit- experimental prefix.
Photo Filter Demo
It is possible to combine these filter functions in interesting ways to simulate complex photo filter effects. You can extend the visuals even further by layering the same element at varying opacity with different filters applied. We used a combination of filter functions to create a Photo Filter demo that we showcased at The Create The Web event in SF. This demo is now available on GitHub.
Here is what we used to create an Old-Style photo effect:
filter: sepia(0.8) saturate(3) brightness(0.25) contrast(2);
You can use many other built-in filter effects in tandem. The available built-in filters are:
As built-in CSS Filters are already available in Chrome, Safari, & Mobile Safari on iOS, you can start playing with them today and see how they can be used to enhance your web application. The CSS FilterLab is a great resource to play with filters and instantly see the results.
Have you been playing with Filter effects? Please do share your code samples with us in the comments!