Foggy: jQuery plugin for blurring page elements

jeffehobbs | karma 602 | avg karma 1.6 · 2012-09-03 23:29:45+00:00

Cool effect. Seeing a FOUFC (Flash Of UnFogged Content) on WebKit/iPad.

nbartlomiej | karma 225 | avg karma 6.62 · 2012-09-03 23:35:53+00:00

Thanks! On which iPad does the bug occur? (I've tested on iPad2, iOS5 and it seemed ok.)

jwilliams | karma 5438 | avg karma 3.27 · 2012-09-03 18:44:42

This is cool, but I'm not a big fan of "fogging" as a UI tool. I noticed Vista/Aero did this quite a bit.

The fogging just obscures information, but replaces it with something that is distracting. You might get an impression of what's there, but it's a tax to comprehend it. OS X (tend to) do this a lot better - if it's not useful, don't make the user squint at it.

Feels like a pure eye-candy effect with no benefit to the user, but I'd be interested in counter arguments/examples.

reply

nbartlomiej | karma 225 | avg karma 6.62 · 2012-09-04 00:06:59+00:00

I like your point, I agree that you should be careful when using this effect.

However, in proper places blur feels very natural; after all, human eye works this way.

I think blur has lots of potential. I especially like these use cases:

- triggering blur effect after a dialog pops-up

- leading the user through a series of mundane forms, displaying the goal in the blurred background

I'd be interested to hear other ideas too.

reply

Trezoid | karma 230 | avg karma 2.09 · 2012-09-03 23:50:41+00:00

using:

color: transparent; text-shadow: 0 0 5px;

Works way better for text on non-webkit browsers and is supported by everything but IE (and even that supports it in 10)

The current form of the blur on firefox is just plain ugly, and seems to be an overly complicated way of achieving the effect.

reply

DougWebb | karma 3318 | avg karma 2.65 · 2012-09-03 22:17:47

Just tried this out; on Firefox at least you have to specify the shadow color, otherwise it inherits from the text color and becomes transparent. So, text-shadow: 0 0 5px #000

jonchang | karma 2179 | avg karma 8.82 · 2012-09-04 00:04:14+00:00

Why only include support for webkit browsers? When Mozilla and Microsoft implement the other parts of filter into their browsers, wouldn't you want native support there as well?

seltzered_ | karma 2897 | avg karma 2.68 · 2012-09-04 01:43:55+00:00

there's also blur.js: blurjs.com, although it's tailored more for blurred div backgrounds.

dlsym | karma 1394 | avg karma 7.49 · 2012-09-04 05:33:37+00:00

Sad thing: I bet this will be abused in a "Please login or signup to view this content!"-way.

Good thing: Instant bypass using 'developer tools' or firebug...

reply

johnx123-up | karma 1612 | avg karma 2.43 · 2012-09-04 08:18:48+00:00

FWIW, Quora already (mis)uses this

squarecat | karma 131 | avg karma 1.12 · 2012-09-04 06:12:37+00:00

Browser bokeh!

Toshio | karma 1487 | avg karma 3.51 · 2012-09-04 09:32:26+00:00

This might improve the user experience by visually signaling to the user that their mouse click to submit a form has been registered by the browser, and please do not click again while the server is processing your input.