Say Hello to Webkit Filters

Earlier this month, a new specification, Filter Effects 1.0, was released. It presents some exciting new Photoshop-like effects that we can use in the browser. Even better, Webkit has already landed support (in the nightlies)!

According to the Spec...

"A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output."

Now, at least at this point, I wouldn't presume to be able to show you everything that's possible with these new filters. I'm still learning them myself! That said, I'll show you a handful of the new filters, how we can use them in our projects, and then, hopefully, we can all brainstorm and learn from each other within the comments. Let's get started.

Filters are typically associated with images (though they can also be applied to video). As such, for the handful of demos below, we'll be using the Nettuts+ logo as input.

Remember: these effects aren't yet available in the public releases of Webkit browsers. For now, download Canary when testing these demos.

hue-rotate

Ever played around with the Hue/Saturation panel in Photoshop? Well now you can play around with it in the browser.

img {
-webkit-filter: hue-rotate(50deg);
}

If specifying this value in degrees seems confusing, just imagine a color wheel. The number of degrees you specify determines where that wheel stops. This means, that 0deg won't do a thing, while 50deg will turn the dial, accordingly.

grayscale

We've used a variety of hacks in the past to transition an image from black and white to color in the browser. One technique calls for two images stacked on top of one another. Another option is to use canvas. Or... we can use the grayscale filter.

img {
-webkit-filter: grayscale(100%);
}

When applying a percentage to the grayscale function, just think to yourself, "On a scale of 0 to 100%, how gray do I want this image to be?

In the future, you'll want to provide prefixes for the other browsers, however, it's not necessary at this point. No need in applying Mozilla transitions to accomodate for a filter that's only implemented in Webkit (so far).

contrast

Once again, think of 100% as resting position. We can then reduce or increase this value to adjust the contrast of the image. According to the spec, applying a value of 0% should make the image 100% black, similar to what you might expect from -webkit-filter: brightness(0%);. However, I'm seeing more of a dark gray.

Now, you could technically apply this to, say, the body of your website, and it would work. However, you'll notice considerable slow down, and lose the ability to scroll the page. AKA - Don't do it, except for fun.

saturate

In addition to setting grayscale(100%), we could also achieve a similar effect by desaturating the image entirely.

In this case, 100% is the unchanged state, at which point you can either decrease or increase this value. As such, reducing this value to 0% should remove all color from the image.