CSS Named Filter Effects — Non-Destructive Effects for Images and Elements

Posted: 16 Sep 2013 05:30 AM PDT

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.

Image of Strawberry Fields Memorial in Central Park with and without css filters applied — An image of Strawberry Fields Memorial in Central Park (left) with css filters applied (middle and right)

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.

There are several levels of css filter effects that you can apply, each with varying levels of complexity.

A set of named filter functions offering convenience and simplicity in use over power and flexibility
Filter effects described in markup that define an overall effect and can be applied to any content
A customizable system that exposes a shading language allowing control over the geometry and pixel values of filtered output

This post will cover the first level of complexity, named filter functions, and I’ll look at the second level next week.

How to Use Named CSS Filter Effects

Adding a filter effect is done through the filter property, which looks simple enough on its own.

1	filter: none \| <filter-function>+;

The value none isn’t particularly interesting except to overwrite a filter given to a parent or to remove one that’s been applied. The value filter-function has a list of potential filters. Note the + signaling you can apply more than one filter at a time to an element or image.

The filter-function property can take a URL that references a filter, a number of named filter functions, or a custom function. Again I want to focus on the named functions today. I’ll list them all below, but let’s start with a simple example using the hue-rotate function, which does pretty much what it sounds like it does.

Green background color filtered to appear as its complementary hue and then desaturated

While the image above looks like 3 different background-colors have been applied to different divs, it’s actually a single background color along with 2 versions where that color was filters. The left rectangle is the original and it simply has a background-color: green applied to it.

The purple in the middle is the same green background with the following filter applied to the div.

1	.filtered {filter: hue-rotate(180deg);}

Rotating a color’s hue by 180 degrees leads to its complement and so the green background becomes purple. Since, we aren’t limited to one filter let’s add another.

1	.filtered {filter: hue-rotate(180deg) saturate(30%);}

Now in addition to changing the original green to its complement purple, we’ve added a filter that also desaturates the color. The right side of the image above shows the result of applying both of these filters.

I applied the same filters with the same values to my image of Strawberry Fields in Central Park, which you can see at the top of this post. Again these filters are non-destructive to the image and can be easily changed to create a new effect.

We can do more than change hue and saturation values. Here’s the complete list of named functions found in the spec.

1  2  3  4  5  6  7  8  9  10

grayscale(<number> | <percentage>);  sepia(<number> | <percentage>);  saturate(<number> | <percentage>);  hue-rotate(<angle>);  invert(<number> | <percentage>);  opacity(<number> | <percentage>);  brightness(<number> | <percentage>);  contrast(<number> | <percentage>);  blur(<length>);  drop-shadow([<length>{2,3} && <color>?]#);

I think the functions above are generally self-explanatory given their names, but if you’re not quite sure what one of these names filters might do here are a few demos that will show you.

CSS FilterLab demo — from Adobe.
CSS3 image manipulation — webapp created with Angular.js
CSS Filter Effects — from Eric Bidelman
CSS Filters — from David Walsh

Each of the above will present one or more images along with a variety of sliders to control the different filtering effects. The first two will also show the resulting css used to create the effect. If the above isn’t enough you can also have a look at the two links below.

CSS Filters Playground — Filters applied to Spongebob Squarepants
Say Hello to Webkit Filters — Article with examples from nettuts+

One last filter-function is the custom function, which again isn’t something I want to cover in detail today. This function allows you to extend things and create additional filtering effects and it deserves a post of its own.

1	custom(IDENT [, <param>]*);

Even without the more powerful URL and custom functions, that still leaves us with 10 convenient named filters that can be applied non-destructively to any element or image.

One thing to keep in mind when using them is their performance. Most of the filters run quickly, but blur and drop-shadow aren’t as quick. You shouldn’t ignore them, but you should consider the performance hit if you do.

Summary

Filter effects are something I’m sure you use in graphic editors all the time. The downside is that if you later want to make a change it’s back to the editor, apply the new filter, save and optimize, etc.

CSS filters will offer a more flexible and non-destructive way to add filters to images and elements. They make it easy to adjust color fundamentals and provide another way to vary transparency among other things.

There are three kinds of filters we can add; named functions, a url pointing to filter primitives, and a custom filter function. Today we looked at the simplest of the three, named functions. I think the names give away what each does, and all are easy to work with in practice.

Browser support isn’t quite there, but it’s there enough that you can experiment and even use css filters in production depending on your project. Browsers without support will simply ignore the filters so think of them as a progressive enhancement thing for the moment. Hopefully it won’t be long before all browsers are fully supporting the filter effects spec.

Next week we’ll move beyond the simple named functions and consider a url pointing to one or more filter primitives.

The post CSS Named Filter Effects — Non-Destructive Effects for Images and Elements appeared first on Vanseo Design.