04

More effects than a Hollywood movie

The web has evolved from a very text-oriented structure into the interactive, experience-rich digital environment we all know and love today. With the waning of Flash (which none of us are mourning, FYI), CSS has had to fill quite a few voids left in web-effects. Enter visual effects, made from scratch in CSS. And while it's not exactly a web-based Photoshop, it's starting to deliver some very interesting results.

Here's a few examples

Sorry these examples only work in Webkit (Chrome/Safari) at the moment.

Tiltshift in tokyo
Tilt-Shift effect built entirely in CSS

Here is the full set of filters

Bob the blurred alien
Blur
Bob the gray-ish alien
Grayscale
Bob the old-skool sepia alien
Sepia
Bob the bright alien
Brightness
Bob the contrast-y alien
Contrast
Bob the freaky alien
Hue-rotate
Bob the inverted alien
Invert
Bob the saturated alien
Saturate
Bob the dropshadowy alien
Drop-shadow

How's this plan gonna come together?

The whole thing is rather simple. With the CSS proprty filter: ... we can add a hardware accelerated filter to any HTML object we like. If need be, we can even combine them. The tilt-shift effect above is a combination of filter: filter: blur(3px) saturate(150%);, we applied a mask to the image and set the same image as background for the wrapping div (this time without the blur).

We can hear you thinking: "Yeah, that's cool and all, but the filter: drop-shadow(...) filter is kind of the same as box-shadow: ...." Nope, that's not exactly true. A box-shadow would give a shadow of the box (ie. it'd be square), but this nifty filter actually obeys transparency in the image (see for yourself!).

Useful?

More or less, it has some potential to enrich the user experience while maintaining load speeds. Always wanted to blur the background while you have a lightbox open? Now you can do that by applying the filter to the HTML element.

Some other stuff you could do with it:

  • Create a nice image gallery with grayed out images
  • Proper grayed-out buttons, without the need for extra images
  • Annoy everyone by blurring the HTML element by just 1px (click here to try)

Sold! Can I get it today?

Short answer: not really.

Long answer: support is very limited at this time. Only Webkit browsers (Chrome and Safari) support these filters. And even then there are some odd quirks: currently filters on hardware accelerated content are still a work in progress in Chrome. The spec is still considered to be a draft version, but it looks very promising!

Show me the source!

Feel free to look around the differente source files we used for this example.