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.
Here is the full set of filters
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!).
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.