It's All a Blur

How many times have you wanted to blur all or part of a web page? If you're anything like me (which you're probably not because I'm a weirdo), it happens all the time.

I tried to do this the other day and learned that there aren't a lot of good options. There is hope, however, since Chrome supports CSS Filter Effects, which include blur. It's only supported by Webkit at the moment (since Chrome 18), but we know that features such as this tend to seep into other browsers over time.

Using the Webkit filter is easy. Just apply a style like this:

-webkit-filter: blur(8px);

And just like that, your page content gets blurry.

But I know, not everyone is using Chrome. Some poor misguided individuals are still using Internet Explorer. What can be done? The good news is that in many simple cases, a jQuery plugin can provide a polyfill for the missing blur feature.

I tried out Foggy, one such plugin. If used in Chrome, -webkit-filter is applied. Otherwise, it dynamically creates a bunch of copies of the element and makes each one slightly transparent and offset to simulate the blurring.

Here it is in action on my comic. All I had to do was include the jquery.foggy.js file and then

$("#cell-1").foggy();

To get this result:

Foggy applied to a comic cell in Chrome

Looks good, right? Yeah! But that was in Chrome, my browser of choice. Let's see what happens in Firefox...

Foggy applied to a comic cell in Firefox. Whoa!

Fail! Not only did it make this cell look weird, it actually screwed up the element locations in the previous cell too. Clearly, this isn't going to work for me.

Don't discount Foggy for your own projects just yet. When applied to "normal" text and images, like in their demo page, Foggy does produce correct results in Firefox and Internet Explorer. It might work for you, depending on what you are doing with it.

But one thing is clear, and that is the fact that the future is blurry. Don't forget to read today's comic, where we continue to see what happens when frogs don't think clearly. Plus, make sure you check out our current FREE STICKERS promotion. There's a link at the top of the comic page for details!

Amphibian.com comic for 9 February 2015