Blur.js: Produce psuedo-transparent blurred elements over other elements. | Hacker News Reader

Blur.js: Produce psuedo-transparent blurred elements over other elements.

blurjs.com

152 pointsKillswitch28 comments

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

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.

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.

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/

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!

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

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.

I like this a lot. Would be amazing if integrated in a service like readability or other.

Very cool. This reminds me of Lytro's viewer - which typically uses Flash in most browsers, but is implemented in HTML5 for mobile devices like iPhone and iPad.

http://www.lytro.com/living-pictures/289

Reminds me of the feature in the iA writer app (called 'Focus' I believe?). Good stuff.

Wow, thanks for the link. That looks perfect for my writing habits.

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

I really like this improvement. Noted!

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

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

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.

Webkit nightly supports CSS filters (including blur).

http://html5-demos.appspot.com/static/css/filters/index.html

You can do it in IE since version 5.5 ☺ http://msdn.microsoft.com/en-us/library/ms532979%28v=vs.85%2...

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

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.

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

This is not on github?

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

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)

It's ironic that a DSCM ended up inspiring such a drive for centralization.

Thanks, I'll try it out.

Superfly

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

> blur is the solution

100% opaque is another solution.

Reply on news.ycombinator.com