Browser Support for CSS Filters

Google Chrome

18.0

Apple Safari

6.0

Mozilla Firefox

-

Microsoft Internet Explorer

-

Opera

-

Introduction to filters

It's worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6. The specficiation can be found here.

Right now filters apply to the whole element and all it's descendants, though it looks like sooner or later there will be the ability to target just the background or the border in addition the the whole element.

Though CSS filters encompass a huge range of possibilities, the most common usage will be the canned effects, namely grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur and drop-shadow.

The syntax for these canned filters looks like:

.thing_you_want_to_filter {
  /*
    these are all default values, note that hue-rotate and blur have units.
    You'll also need to include the vendor prefixes.
  */
  filter: grayscale(0);
  filter: sepia(0);
  filter: saturate(1);
  filter: hue-rotate(0deg);
  filter: invert(0);
  filter: opacity(1);
  filter: brightness(1);
  filter: contrast(1);
  filter: blur(0px);

  /* Drop shadow has the same syntax as box-shadow – see below for why it's amazing! */
  filter: drop-shadow(5px 5px 10px #ccc);
}

Filter Playground

Play with the sliders…

Drop Shadow

At this point it's worth pointing out that the drop shadow here is amazingly awesome. Here's a quick comparison to show why:

The left has a box shadow, which predictably shadows the whole box, the right has a CSS filter applied, and because it's a PNG with alpha transparency, the shape of the object gets a shadow. This is pretty cool stuff!

What can you do with them?

As examples show up, I'll list them below, but here are a few ideas for how you can use these:

  • Changing colours of icons to avoid http requests
  • Blurring backgrounds of modals (Example)
  • Transitioning them to fade images from monochrome to colour on hover

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin