In the quest to create tools to make CSS easier to use, Adobe has created the CSS Filterlab which creates cinematic special effects to HTML with simple CSS syntax. With the CSS Custom Filters you can create effects such as: flipping pages, curling corners, paper textures, curtain effects and more.
To get started, click on the Help heading at the top right, which brings up the following dialog box. Here, your options are: Explore, Animate, Create, Share and Contribute. Let’s look at how these work.
• Explore: To get started, click on the Add Filter button at the top left. This brings up two tabs, Built-in and Custom. The Built-in fiters are available by default and will work in your browser.
• Custom filters use GLSL shaders and use textures and effects not possible with the built-in filters.
If you try to use the custom filters (as I did) in Google Chrome, you'll see the message above.
When you click on the Help heading you'll see the dialog box above.
Your next step is to download Google Chrome Canary and install it. (Note the warning about this not being for the faint of heart). Once you’ve installed Chrome Canary and have launched it, type: chrome://flags/ in the location bar and hit enter.
Next, you’ll see the message above. Fortunately, you’ll be using Chrome Canary, not Google Chrome. Look for the Enable CSS Shaders flag and turn it on. After that, look for the GPU Accelerated SVG Filters flag and turn it on, too. Click on the Relaunch Now button at the bottom of the browser.
Now, copy over the (http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/) URL from Google Chrome to launch the CSS FilterLab in Chrome Canary.
When you click on the Add Filter button, you’ll notice that the tabs have changed. Your options are: Built-in, Custom, Forked Custom and Import via Gist.
To get started an idea of what the filters will do, click on the Add Filter button at the top left of the interface and choose any of the presets to experiment with. You’ll see the changes on the background image. You can use several presets at once and see how they affect the background image.
Another option is to experiment with the Custom filters. Here’s an example with the Crumple filter applied to the image on frame zero of the animation.
The next step is to use these effects to create an animation. Note that you have timeline controls below the image preview. To create an animatiion, you’ll need to use one or more filters. The first thing to do is to set a duration for the animation. I chose 30 seconds. Pick any filter, then click anywhere on the timeline to move the playhead to that position. When you begin to make adjustments, that will create a keyframe on the timeline. To see what’s happening with the animation, click on the play button.
Observations
• The effects are cumulative and stack on top of each other in the animation, creating unpredictable results. From what I could see, you would have to undo the one filter on the next frame and apply a new one to create a different effect. i.e. As an example, I applied the page curl effect on the last frame and the page curl affected all the frames before it, which is not what I expected.
• The animations didn’t play back evenly on my computer.
• I couldn’t find a way to delete the keyframes. I had to move all of them to the zero position to start over, which isn’t a great solution.
• The process crashed a few times and when I tried to refresh the browser, I was unable to do so. Even closing and reopening the browser didn’t fix the problem. I even deleted the cache with no result. The only thing that seemed to work was to close all the filters, but even then, the keyframes from the previous session were still in place. I had to move all of them to the zero position and close the filters to eliminate the effects.
When I attempted to restart the session and start afresh I was unable to do so. What happened was seeing the filter controls on the left and a white screen with nothing visible. In addition, the previews of the effects kept disappearing from the screen.
Conclusion
On the surface of it, the CSS FilterLab promises to offer some great options for web design but it’s in its infancy. A lot of work needs to be done to fix the bugs in the execution. In time it looks like this technology will have a lot to offer, but not as it stands right now. For further reading, check out the links below:
