

Blur.js: Produce psuedo-transparent blurred elements over other elements. - Killswitch
http://www.blurjs.com/

======
hinathan
This is wrong on a lot of levels (x-platform, cpu usage, etc) but does make
for such a pretty effect. Would be lovely if CSS(n+1) could support this kind
of transform, especially to pull it out of the GPU instead of bit-banging
through a <canvas/>

~~~
jacobolus
SVG can do it: <http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement>

Unfortunately, browser support of less common SVG features is spotty – either
missing or unoptimized.

~~~
callmevlad
This seems like it applies the filter to the entire element (including its
children), which would not give the same effect as blur.js without some
complicated absolute-positioning trickery.

~~~
pygy_
You could do it like this with CSS, data URI and SVG:

    
    
        .blur {
          background-image: url('data:image/xml+svg;utf8,
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <defs>
                <filter id="f1">
                  <feComponentTransfer>
                    <feFuncR type="table" tableValues="0.5 1"/>
                    <feFuncG type="table" tableValues="0.5 1"/>
                    <feFuncB type="table" tableValues="0.5 1"/>
                  </feComponentTransfer>
                  <feGaussianBlur stdDeviation="5" /> 
                </filter>
              </defs>
        
              <image x="0" y="0" width="300" height="80" 
                xlink:href="http://background.png" 
                filter="url(#f1)" />
            </svg>
          ');
        }
    

(expanded for clarty, and I didn't test it so it may be buggy/not
syntactically correct).

You can off course generate all that in JS and parametrize it.

It should work in Chrome, but won't in IE9. No idea for other browsers.

see <http://jsfiddle.net/estelle/SJjJb/>

------
coderdude
This creates an amazing effect that looks very similar to the Windows Aero
look. Talk about sprucing up a boring modal dialog. I noticed there's a slight
"flash of unstyled content." It's probably the only thing that will hold
people back from using it on any elements that are visible on page load. I'm
disappointed to see that even aided by JavaScript there is no support for IE8.
Oh well, can't really blame that on the developer. I highly doubt IE8 would
have been able to render it anyway.

Superb!

------
moe
Sadly too CPU intensive. The last image (mountains) freezes my chrome tab
solid. The others take 1-2 seconds to process.

------
aridiculous
Bizarre. I just put together a quick reader demo last week using blurs to
focus the eye (like tilt-shift does for photos).

<http://www.swissariknife.com/focus>

I added keyboard short-cuts to narrow or widen the number of lines that are
'clear' at a time. You can scroll through while you read or use the arrow
keys.

I ended up just hard-coding it using HTML spans and text-shadows to
demonstrate the effect. This is NOT an actual solution, just an experiment.

Warning: This may appear way differently in different browsers and possibly
not at all. The effect generally works in FF/Safari/Chrome.

~~~
godfreykfc
The text-shadow trick is really clever. I think a "progressive" version could
be pretty cool. Just tried throwing that together real quick by changing the
blur radius in 0.5px increment. Needs some fine tuning (shadow color perhaps),
but you get the idea:
[https://img.skitch.com/20120309-c323134j8wm7nc34pudf9r2nri.p...](https://img.skitch.com/20120309-c323134j8wm7nc34pudf9r2nri.png)

~~~
aridiculous
I really like this improvement. Noted!

Might try to throw together something with blur.js now.

------
ootachi
You can do this natively in CSS with Firefox. Unfortunately, WebKit has yet to
catch up. (Contrary to popular belief, WebKit is not ahead in everything.)

Instructions: [http://css-plus.com/examples/2010/05/how-to-add-a-
gaussian-b...](http://css-plus.com/examples/2010/05/how-to-add-a-gaussian-
blur-effect-to-elements-within-firefox/)

~~~
callmevlad
I'm pretty sure this is not the same thing. The Gaussian filter you linked to
blurs the entire element, including it's children. The behavior seems to be
similar to CSS opacity, so if you want the children (like the text inside the
blur.js demo boxes) to be non-blurry, you have to figure out some way to float
them over the blurred element.

------
lojack
If I drag the "Draggable" box down to the "Changing Source" box on Chrome, the
overlay messes up.

Otherwise, nice little effect, loads sort of slow (not sure if thats the
javascript or the website).

------
sxtxixtxcxh
I tried using this a couple weeks ago. One problem I encountered was that the
images have to be on the same domain for it to work its canvas magic.

------
gildas
As usual jshint is not used... So it leaks global variables.

------
felixchan
This is not on github?

~~~
MattJ100
Does it have to be? ( <http://news.ycombinator.com/item?id=3680912> )

~~~
drivebyacct2
While I agree with the sentiment, GitHub is like crack for random hackers. At
least it is for me. It's so convenient to search for <any big OSS project> and
find that someone is mirroring it on GitHub for convenience. It's simply
faster to use their web interface to peruse through a project or to search
within a project than it is to checkout a local copy and then open the
directory in Sublime.

That having been said, I don't really consider "it's not on GitHub" to be a
valid criticism. I certainly understand developers wanting to use their own
solutions or that they might have hurt feelings after GitHub's handling of
their intrusion (not that I care, just saying based on the number of HN
posting, many people seem to)

------
jan-hocevar
Thanks, I'll try it out.

------
enthdegree
Superfly

------
drivebyacct2
Awesome, awesome, awesome. I've always wanted this but I've never taken the
time to learn enough about graphics processing to even know where to begin.
Thanks for sharing!

For those who hate on compiz, etc, for transparent windows and readability,
blur is the solution. As I can see from the demos, it clearly is true in the
browser as well (well, why wouldn't it be).

~~~
gbog
> blur is the solution

100% opaque is another solution.

