What’s in a Filter?

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.

boxshadow

An image 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.

The same image styled with drop-shadow.

The same image 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.)

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.


44,560 total views, 9 views today

Posted on March 9, 2013 by Sarah · 19 comments

19 comments

  1. Alhadis
    - Reply

    I swear I turn my head for five minutes, then all of a sudden this pops up. :|

    Anybody else feeling like the web race is going too fast for them to keep track of?

  2. parc bébé bois
    - Reply

    Does your website have a contact page? I’m having problems locating it but, I’d like to shoot
    you an e-mail. I’ve got some creative ideas for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it expand over time.

    1. Sarah Author
      - Reply

      Yup. Fun fact, we actually have an internal team whose sole purpose is to contribute to web standards. They author new proposals and contribute to new and existing specs, and even write bug fixes and do a lot of solid development work. If you’re interested you can learn more here http://html.adobe.com/webstandards/

    1. Sarah Author
      - Reply

      Hey Marsha,

      Not massive at all. There was a time commitment to get it started but this is a WordPress so any further work really requires my fingertips and the text editor.

      If you want to get up your own blog, I’d suggest getting a local server environment going (not as scary as it sounds!) with MAMP and installing WordPress. There’s lots of blogging platforms, but if you want your own custom thing WP is a good place to start.

      You might want to check out other blogging platforms like Tumblr, they allow a certain amount of customization.

      And Google the heck out of everything to find answers.

      Best of luck.
      Sarah

  3. fsTjB
    - Reply

    742869 324457This really is the suitable weblog for anybody who needs to seek out out about this subject. You notice so significantly its virtually laborious to argue with you (not that I actually would want

  4. Valentine Ifie
    - Reply

    I absolutely love your website.. Pleasant colors & theme. Did you create this web site yourself? Please reply back as I’m wanting to create my very own website and would love to find out where you got this from or what the theme is named. Thank you!

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>