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
Jingle Bells
Oh, jingle bells, jingle bells
Jingle all the way
Oh, what fun it is to ride
In a one horse open sleigh
Jingle bells, jingle bells
Jingle all the way
Oh, what fun it is to ride
In a one horse open sleigh
Rudolph The Red Nose Reindeer
Rudolph the red nose reindeer,
had a very shiney nose,
and if you ever saw it,
you would even say it glowed.
All of the other reindeer,
used to laugh and call him names.
They never let poor Rudolph,
join in any reindeer games.
We wish you a merry Christmas
We wish you a merry Christmas,
We wish you a merry Christmas,
We wish you a merry Christmas,
And a happy New Year!
This is a blurry box
Containing blurry text
Simple blurry text (hover me!)
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.