Hello, I'm trying to find out if there is a jQuery plugin that can has the effect of literally blurring elements on a page, so a user can't read them. It's for a flashcard application I'm building, and I want to be able to hide the answer section of a card, making it appear unfocused as if you were looking at it through a blurry window, perhaps with some sort of overlay. jQuery has so many plugins and effects that I bet one like this exists, however googling for "jQuery blur effect" and the like predictably turned up results related to slide effects rather than what I'm looking for. Has anyone heard of a plugin that can do something like this?
+1
A:
You could do this with CSS3:
#hidden {
color: transparent;
text-shadow: #6374AB 0px 0px 20px;
}
Edit with more info: Currently only works in WebKit based browsers. Cross-browser text shadow info here: Creating Cross Browser Compatible CSS Text Shadows
ghoppe
2010-02-19 01:10:34
That's very much the type of effect I'm looking for, but I'm looking for it for a whole section of elements rather than just the text. Might not exist though...
japancheese
2010-02-19 01:16:10
Some problems with this: (1) won't work on IE or Opera. (2) The user can still select the text and get an unblurry highlighted version.
Max Shawabkeh
2010-02-19 01:16:49
Actually, it does work in Opera 9.
ghoppe
2010-02-19 01:18:09
Oh, and selecting the text doesn't "unblurry" it. One would still have to copy and paste. :)
ghoppe
2010-02-19 01:19:05
If it's going to be more than text, I don't think it exists client-side. You would likely have to look at ImageMagick or something similar…
ghoppe
2010-02-19 01:23:00
I tested in Opera 10, and setting color to transparent hides the blur. Also, selecting does unblur it, at least on Firefox and Chrome.
Max Shawabkeh
2010-02-19 08:31:40
+2
A:
I have had to implement something similar to this. I just used a transparent PNG (well, obviously most of the PNG was NOT transparent) with little pockets of transparency. Just enough so the user could get a hint of the text, but not really see it. Not really a blur - more like what the board game Outburst does before you put the card behind the red decoder thing. I just set the background image of an overlay div to the PNG and resize accordingly.
Eric
2010-02-19 01:32:40
+1
A:
how about using the sliding doors technique? you could have a small vertical sliced png that "simulates" a slice of blurred text with two rounded edge blur pieces to cap off each side. you could then create an overlay/toggled div with this blurring imageset that is similar width to the number of characters of the word and hide the word.
jellyfishtree
2010-02-19 01:59:47