HTML5 and CSS3 Advent 2011

Blurring the lines

Using blur within the browser was long not possible and in a way it still isn't, but using the technique below we can fake it to some amount. Try to click and play with the examples below, all the elements are interactive. There are no images involved whatsoever.

Examples

Click to go to the next song!
Faking depth of field

This is a blurry box

Containing blurry text

Simple blurry text (hover me!)

Blurring text, do try to hover and use the form fields!

How does it work?

Because we can't define something like a blur-radius to just an element, we have to fake it. Blurring text is easy, boxes are a bit harder but also not too complicated.

Blurring text

We blur the text by giving it a text-shadow that doesn't have an offset and has the color of our text. By adding a blur radius to the shadow we have created text with a blurry fade-out effect. The only thing that's left to do is hide the original text by giving it color: transparent. Have a look at today's css file to see how to implement it.

Blurring elements

First the good news: it's not hard, the bad news however is that it only applies to the box border. This means you cannot blur the background image for instance. We use the box-shadow property to fake the blur by adding multiple shadows with varying amounts of blur in the same color as the element's background-color.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012