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.
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.
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.
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
Show us the source!
Feel free to look around the different source files we used for this example.