Foggy: jQuery plugin for blurring page elements
nbartlomiej.github.comThis 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.
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.
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.
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
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?
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...
FWIW, Quora already (mis)uses this
Cool effect. Seeing a FOUFC (Flash Of UnFogged Content) on WebKit/iPad.
Thanks! On which iPad does the bug occur? (I've tested on iPad2, iOS5 and it seemed ok.)
there's also blur.js: blurjs.com, although it's tailored more for blurred div backgrounds.
Browser bokeh!
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.