Blur This! (or Demonstrating MobileSafari’s Awesome Support for CSS3 Filter Effects)

The (iOS native) Yahoo! weather app displays a nice flickr photo of each weather location, and a minimalist information architecture: the most important data you need is immediately visible while it’s just a single tap to drill down into more detailed data.

Rather than cover the photo with some modal UI showing a bland list of statistics, the app keeps you in context after you tap. The detailed information is easily revealed and because the photo remains in the background the interaction is intuitive. It takes nothing more than a second tap to return to your previous context:

I’m very excited to present an example of how we can achieve the same visual effect with CSS3 (and just a little Javascript). What’s even more exciting is that the underlying tech we need has been supported in MobileSafari since iOS 6.0!

We’re going to lean heavily on CSS filter effects. These enable web developers to augment the contents of a block-level element with effects that were previously reserved for designers in PhotoShop, or graphics hackers in native apps. With CSS3 filters, we can apply a blur to our image as follows:

img.photo {
    -webkit-filter: blur(7px);
}

That simple ‘-webkit-filter’ tells the browser to apply a blur to our img element. The 7px is passed to the gaussian blur function and determines exactly how much blur should be applied.

From simple beginnings…

You can try out the first basic prototype example on codepen, ideally on your iPhone but Chrome 26+ is also supported. When you tap or click on the photograph it will instantly blur. You’ll notice that this still needs some work before it will come close to the high production feel of the Yahoo! app. At a minimum, we need:

1. To ensure the blurred image doesn’t look like it stops slightly short of the edges of the screen.
2. To smoothly animate the blurring of the photo
3. To also push the image upwards slightly as the detailed data slides into view

I’ll discuss each issue separately before bringing them together into a single working example.

Fixing up the blur

In the simple pen, the blur appears to detach the image from the screen/container edges. This looks unsightly and somewhat ruins the overall visual impact of the effect. To fix this, we need to set a background-color on the HTML body that appears behind the image div. The background color  bleeds through the blurred edges: whatever color we choose should not contrast with the image overall. It makes sense to pick a color that dominates the image.

Rather than hard-code a color for the image in the example, we can use the jQuery/Zepto average-color plugin to find an approximation of the overall color of our image. By setting the background to that average color, the image appears to blur all the way to its edges!

There is one caveat with the above approach: the browser only permits the pixel values of images to be queried when the images are served from the same domain that hosts the plugin. It means you need to be mindful when embedding images from around the web without hosting them yourself.

Animate the blur

By using a CSS3 transition, we can animate the blurring of the image:

.photo {
    -webkit-transition: -webkit-filter .35s;
}

.blurry {
    -webkit-filter: blur(7px);
}

To trigger the animation, we detect a click or tap event and add the blurry class to our photo element. The blur appears to engulf the image in a delightful way.

Add a little motion

The blur transition is especially effective when we combine it with a transform. The translateY transformation discretely moves the blurring image upwards. This gives the feeling of the background getting out of the way as the user focuses on the detailed data overlay we bring in from below.

.photo {
    -webkit-transition: -webkit-filter .35s,
                        -webkit-transform .35s ease-in-out;
}

.blurry {
    -webkit-filter: blur(7px);
    -webkit-transform: translateY(-40px);
}

To see the full example in action, I’ve created a live demo on codepen so you can see it alongside the working code. Send yourself a text message with this link to try it out on your iPhone: http://bit.ly/11hdw0o.

Blur with clarity

Now you can see how easy it is to add animating blurring to your CSS. Although the browser support for filter effects is somewhat limited right now, the fact it has working support on iOS is incredibly exciting.

Even crazier is the fact that despite the fun, sophisticated visuals that the code above creates, it barely scratches the surface of what’s possible with liberal use of Filter Effects. Blurring images is only one part of a complex spec. The ‘filter’ property is an easy-to-use version of a more general proposal for vertex shaders that will give web authors mind-bending power to apply effects to their content.

Have you made use of any of these filters in your hacks or in any production sites? Please share URLs for your favorite demos in the comments below!

Follow @LeeMallabone to find out when my final post in this series is published, and for regular front-end tips & tricks.

Advertisement