5 ms·

Foggy: jQuery plugin for blurring page elements

49 points by nbartlomiej 14y ago

jwilliams 14y ago
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.
- nbartlomiej 14y ago
  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.
jeffehobbs 14y ago
Cool effect. Seeing a FOUFC (Flash Of UnFogged Content) on WebKit/iPad.
- nbartlomiej 14y ago
  Thanks! On which iPad does the bug occur? (I've tested on iPad2, iOS5 and it seemed ok.)
Trezoid 14y ago
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.
- DougWebb 14y ago
  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 14y ago
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_ 14y ago
there's also blur.js: blurjs.com, although it's tailored more for blurred div backgrounds.
Toshio 14y ago
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.
dlsym 14y ago
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...
- johnx123-up 14y ago
  FWIW, Quora already (mis)uses this
squarecat 14y ago
Browser bokeh!

49 points by nbartlomiej 14y ago

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.

nbartlomiej 14y ago
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.

jeffehobbs 14y ago

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

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

Trezoid 14y ago

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.

DougWebb 14y ago
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 14y ago

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_ 14y ago

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

Toshio 14y ago

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.

dlsym 14y ago

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...

johnx123-up 14y ago
FWIW, Quora already (mis)uses this

squarecat 14y ago

Browser bokeh!