CSS built-in filters (available by default in webkit browsers) are a powerful introduction to the CSS spec, 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. And guess what – they’re animatable ready to use for page transitions and intricate transitions.

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.

Drill Deep

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 parent div. What makes this special is when filters are applied to the parent div, all the children inherit the style. Filters extend to a plethora of HTML elements, including images, text, containers and even video.

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

CSS built-in filters include the following:

Brightness

Invert

Hue-Rotate

Contrast

Saturate

Sepia

Greyscale

Opacity

Blur

Drop-Shadow

To play with a live demo of filters visit CSS FilterLab in a webkit based browser.

The syntax is highly versatile allowing you to reorder filters as you would in a Photoshop document. Staying true to the nature of CSS, the lowermost filter take priority and is applied to the proceeding filters on the stack.

For example, -webkit-filter: sepia(100%) grayscale(44%) hue-rotate(180deg); will yield a different result than –webkit-filter: hue-rotate(180deg) sepia(100%) grayscale(44%);

-webkit-filter:

sepia(100%)

grayscale(44%)

hue-rotate(180deg);

-webkit-filter:

hue-rotate(180deg)

sepia(100%)

grayscale(44%);

Original

In the above example, reordering filters with the same value produces a different effect. This allows you fine tune your assets to get the exact rendering you want.

What’s the Difference?

Built-in filters introduce new design concepts to CSS, though some of these are properties we’ve seen before. Opacity and drop-shadow are features we’re already familiar with but have key differences in the filter spec.

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.

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.

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.)

Opacity

filter: opacity(); behaves similarily to opacity(); with one key benefit. The filter opacity property works intelligently in tandem with the rest of your filter stack allowing for fine-grained styling control. opacity(); on it’s own will apply transparency as the topmost property, always imposing the alpha on the sum of your stack.

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 which can lead to potentially degraded performance. The following table outlines each filter and how you can expect them to perform:

Filter effect Support Performance grayscale -webkit very fast sepia -webkit very fast saturate -webkit very fast hue-rotate -webkit fast invert -webkit very fast opacity -webkit can be slow brightness -webkit fast contrast -webkit fast blur -webkit slow unless accelerated drop-shadow -webkit can be slow

Table from htmlrocks.com

Filters are Important

As you can see, CSS filters allow you to visually style content, saving you from an ceaseless pile of layered PNGs. By using the power of the browser, you add less weight to your website resulting in quicker load times through reduced HTTP requests. Built-in filters are a valuable contribution to the web platform for two reasons; you can style content with new advanced techniques (today!) and they represent a promise of more browser-based styling capabilities to come.

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

Tools

Sometimes you need the help of authoring tools to take your HTML content above and beyond what’s rationally achievable by hand. Adobe Edge Animate brings visual authoring to HTML and offers support for built-in filters with the latest release. Using filters with the power of high-fidelity animation techniques, you can create rich, browser-backed content deployable anywhere on the web platform. Check it out here.

For more information on filters including details on SVG implementation and next-gen effects, visit the official W3C Filter Effects 1.0 draft specification.

Follow @sarahwhatsup

137,353 total views, 2 views today