Like clipping and masking, filters have long been the domain of graphic editors. For example if you wanted to change the saturation of an image, you’d open an editor, make the changes, save the image, and be on your way. Before too long we’ll skip the graphic editor and filter our images through css alone.
As with most of the future css I’ve been covering the last few weeks, browser support isn’t there yet, but it’s probably better than you expect. Chrome, Safari, Opera, iOS Safari and Blackberry browser all have support in some way, while IE, Firefox, Opera Mini, and Android Browser don’t. That’s 5 to 4 in favor of support if you’re counting.
The css filter effects spec is the longest of any I’ve covered recently so I won’t even attempt to go over everything here. Instead we’ll look at the simplest way to add filter effects today and continue with a couple of other ways in the coming weeks. Hopefully after today you’ll get a feel for the possibilities css filters provide.
What are CSS Filter Effects?
If you’ve worked with filters in a graphic editor before then you should have an idea what filters are. In css they’re a way to process how an element will render on the screen before it’s actually displayed. They were originally created for SVG, but they’ve expanded beyond SVG alone.
When a browser renders a page, elements will first be drawn to a buffer, where the filters are applied and then they’ll be drawn to the screen itself.
CSS filters are image based in that they take zero or more images as input. To these images a number of parameters are applied to create the desired effect and then a new image is produced as output for the screen.
Even though they’re considered to be image based they can be applied directly to non-image elements, hence the zero images as input.
Finding a browser and an easy way to add on filters...well that's why I ended up reading this article. Some browers just do not compute with the css filter, yet you can still create digital art. And from that, a non-destructive way to keep the pixelization for your images, relatively unharmed.