Toying with CSS Filter Effects
I spent this weekend getting my feet wet with CSS Filter
Effects,
in particular, the filter functions. They're easy and fun to use, allow
us to do really neat effects in the browser without requiring
<canvas>
. The current version of the specification includes CSS
Shaders,
which use GLSL and the custom()
function.
I whipped up a demo of the filter functions in action. It does not, however, include custom filters. That will come. It works in the latest versions of Chrome/Chromium and Safari 6.
A note about performance when using these filters: blur()
can cause trouble. A small blur radius is fine, but larger radiuses can cause the UI to lag quite a bit in Chrome, particularly on low-powered devices. Use it judiciously.