Archive for March, 2013

March 11, 2013

What’s in a filter?

What’s in a filter?

With the release of Edge Animate 1.5 we’re excited to announce the implementation of CSS built-in filters, a cutting edge new spec which enables web developers and designers to bring stimulating visual effects to their elements which could previously only be achieved in design tools like Photoshop.

So what is a filter, exactly?

CSS filters are a powerful introduction to the CSS language, which bring eye-catching visual effects to the web. Backed by hardware acceleration, filters provide a fast and simple way to style your content. But how do they work? Think of filters as post-processing step similar to how you would edit effects in Photoshop. The browser takes a snapshot of the page, grabs the pixel data, styles your elements, and then serves it back to you with the filter effect intact.

Similar to how you can stack lenses on a camera, filters can also be stacked to create unique effects. Combined with the power of Edge Animate, you can achieve compelling animated effects in your compositions.

Keep in mind that CSS filter effects are highly experimental, and are currently only available using the –webkit prefix in Chrome, Safari, iOS6 Safari and Blackberry 10 browsers.

Filters in Animate

Usually when we think of filter effects we think of images. Filters are much more powerful and can be applied to a variety of elements.

Rollover the thumbnails to see the applied filters (only works in webkit browsers)
 

In the above example, a filter is applied to a symbol, which in turn applies the effect to the image and text underneath. Translated into DOM-speak, symbols are glorified divs where each sub-symbol is akin to a child div. What makes this special is when filters are applied to the parent div, all the children inherit the style. This includes divs, text, images and other symbol children, eliminating the need to drill down into your symbols to render individual elements.

Before filters, the above effect could only be achieved through layering of multiple graphics. By using filters, you can minimize server requests and reduce your output payload by using a single graphic instead of two or more.

Supported Filter Types

Animate offers support for the following built-in filters:

  • Invert
  • Hue-Rotate
  • Contrast
  • Saturate
  • Sepia
  • Greyscale
  • Blur and,
  • Shadow

Box/Text-shadow vs. Filter: drop-shadow

Drop-shadow is a valuable add to the filter stack, allowing you to take shadows above and beyond what can be achieved with a box-shadow.

boxshadow

A graphic styled with box-shadow

 
 

The above graphic is rendered using box-shadow. Not bad. We have a transparent PNG file, though it’s highly evident the shadow is being applied to the dimensions of the graphic. Box-shadow is a literal rendering of its’ definition; a box-esque shadow is applied based on the current dimensions defined by the container.

filtershadow

The same graphic styled with drop-shadow

This is where the magic of drop-shadow comes in. This effectual property grabs transparent pixel data, and then applies the shadow around the opaque pixels. Since the property is also intelligent enough to pick up translucent pixels, your shadow will also appear behind semi-transparent elements (as opposed to box-shadow, which only renders around the outline.)

Performance

Since built-in filters are GPU accelerated, their performance is fairly stellar considering the processing demands on the browser for rendering. However, be aware that the more filters you implement, the harder the browser has to work, leading to degraded performance. The following table outlines each filter and how you can expect them to perform:

Filter effect Browser support Performance
grayscale
Chrome
very fast
sepia
Chrome
very fast
saturate
Chrome
very fast
hue-rotate
Chrome
fast
invert
Chrome
very fast
contrast
Chrome
fast
blur
Chrome
slow unless accelerated
drop-shadow
Chrome
can be slow
Table from htmlrocks.com
 

As you can see, filters can add rich effects with hardware-accelerated performance. By styling content leveraging the power of browser rendering, you can optimize your compositions for richer effects with less payload. We encourage you to give filters a shot, and see how they can enhance your Animate projects. If you haven’t downloaded Animate 1.5 yet, be sure to get it here http://html.adobe.com/edge/animate/ while it’s still free.

For more information on other exciting CSS features coming to a browser near you, visit html.adobe.com/webstandards.

4:47 PM Permalink