Predefined filter effects are now implemented in WebKit browsers (Chrome, Safari 6, iOS Safari 6, BB10 browser). You only have to set CSS properties to blur a DIV, drop a shadow, saturate an image (or the opposite with grayscale), or play with the opacity or the gamma (brightness) information. Then you can use CSS animations and transitions to create cinematic effects on your web pages.
Adobe is actively working with the W3C on CSS filters. Actually, this is just a start. Adobe is working on CSS Custom Filters that will unleash our creativity in modern browsers. You should read this great article by Vincent Hardy on CSS custom filters.
Edge Animate 1.5
The latest release of Adobe Edge Animate (version 1.5 – Feb 2013) lets you play and animate CSS filters. Once you’re aware that these CSS properties won’t work on all browsers (you can check the browser’s compatibility on caniuse.com), you can have a lot of fun and create stunning animations. Here are some experiments I’ve made with filters.
Simple animation with Edge Animate 1.5
Here is a short video tutorial that explains how to create a simple animation with Edge Animate and CSS Filters.
Adding a blur filter, you can easily simulate a depth of field. Roll over one of these blue squares:
- on mouse over: this.play()
- on mouse out: this.playReverse();
Click here to download the Edge Animate project: http://creativedroplets.com/samples/edge-animate-filters/four-buttons.zip
In this animation, I’m using the grayscale filter on the cloud, fading to the colored version. When the logo appears, I’m adding a smooth blur filter at the beginning of my fading transitions.
Click here to download the Edge Animate project: http://creativedroplets.com/samples/edge-animate-filters/logo-filters.zip
Again, playing with the blur filter (my favorite one). I’ve produced this trailer for an imaginary movie starring Thibault Imbert. In this animation, I’m using the Adobe Edge Web Font “days-one”. The free Edge Web fonts are directly available through the interface of Edge Animate. For this trailer, I’m playing with a lot of filters: blur, grayscale, contrast, and drop shadow. I need to add a soundtrack Maybe in a future tutorial, I’ll explain how to sync sound with an Edge animation.
Click here to download the Edge Animate project: http://creativedroplets.com/samples/edge-animate-filters/movie-trailer.zip
Have fun with filters !