4 ms·

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

152 points by Killswitch 15y ago

jan-hocevar 15y ago
Thanks, I'll try it out.
enthdegree 15y ago
Superfly
coderdude 15y ago
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!
drivebyacct2 15y ago
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 15y ago
  > blur is the solution 100% opaque is another solution.
sxtxixtxcxh 15y ago
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.
moe 15y ago
Sadly too CPU intensive. The last image (mountains) freezes my chrome tab solid. The others take 1-2 seconds to process.
hinathan 15y ago
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 15y ago
  SVG can do it: http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement Unfortunately, browser support of less common SVG features is spotty – either missing or unoptimized.
  - callmevlad 15y ago
    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_ 15y ago
      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/ http://jsfiddle.net/estelle/SJjJb/
lojack 15y ago
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).
felixchan 15y ago
This is not on github?
- MattJ100 15y ago
  Does it have to be? ( http://news.ycombinator.com/item?id=3680912 http://news.ycombinator.com/item?id=3680912 )
  - drivebyacct2 15y ago
    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)
- sho_hn 15y ago
  It's ironic that a DSCM ended up inspiring such a drive for centralization.
aridiculous 15y ago
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 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.
- leddt 15y ago
  I like this a lot. Would be amazing if integrated in a service like readability or other.
- callmevlad 15y ago
  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 http://www.lytro.com/living-pictures/289
- nchlswu 15y ago
  Reminds me of the feature in the iA writer app (called 'Focus' I believe?). Good stuff.
  - aridiculous 15y ago
    Wow, thanks for the link. That looks perfect for my writing habits.
- deleted 15y ago
  [deleted]
- godfreykfc 15y ago
  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.png https://img.skitch.com/20120309-c323134j8wm7nc34pudf9r2nri.p...
ootachi 15y ago
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-blur-effect-to-elements-within-firefox/ http://css-plus.com/examples/2010/05/how-to-add-a-gaussian-b...
- callmevlad 15y ago
  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.
- Yaggo 15y ago
  Webkit nightly supports CSS filters (including blur). http://html5-demos.appspot.com/static/css/filters/index.html http://html5-demos.appspot.com/static/css/filters/index.html
- spyder 15y ago
  You can do it in IE since version 5.5 ☺ http://msdn.microsoft.com/en-us/library/ms532979%28v=vs.85%29.aspx http://msdn.microsoft.com/en-us/library/ms532979%28v=vs.85%2...
gildas 15y ago
As usual jshint is not used... So it leaks global variables.

152 points by Killswitch 15y ago

jan-hocevar 15y ago

Thanks, I'll try it out.

enthdegree 15y ago

Superfly

coderdude 15y ago

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!

drivebyacct2 15y ago

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 15y ago
> blur is the solution 100% opaque is another solution.

sxtxixtxcxh 15y ago

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.

moe 15y ago

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

hinathan 15y ago

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 15y ago
SVG can do it: http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement Unfortunately, browser support of less common SVG features is spotty – either missing or unoptimized.
- callmevlad 15y ago
  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_ 15y ago
    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/ http://jsfiddle.net/estelle/SJjJb/

lojack 15y ago

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

felixchan 15y ago

This is not on github?

MattJ100 15y ago
Does it have to be? ( http://news.ycombinator.com/item?id=3680912 http://news.ycombinator.com/item?id=3680912 )
- drivebyacct2 15y ago
  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)
sho_hn 15y ago
It's ironic that a DSCM ended up inspiring such a drive for centralization.

aridiculous 15y ago

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

leddt 15y ago
I like this a lot. Would be amazing if integrated in a service like readability or other.
callmevlad 15y ago
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 http://www.lytro.com/living-pictures/289
nchlswu 15y ago
Reminds me of the feature in the iA writer app (called 'Focus' I believe?). Good stuff.
- aridiculous 15y ago
  Wow, thanks for the link. That looks perfect for my writing habits.
deleted 15y ago
[deleted]
godfreykfc 15y ago
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.png https://img.skitch.com/20120309-c323134j8wm7nc34pudf9r2nri.p...

ootachi 15y ago

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-blur-effect-to-elements-within-firefox/ http://css-plus.com/examples/2010/05/how-to-add-a-gaussian-b...

callmevlad 15y ago
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.
Yaggo 15y ago
Webkit nightly supports CSS filters (including blur). http://html5-demos.appspot.com/static/css/filters/index.html http://html5-demos.appspot.com/static/css/filters/index.html
spyder 15y ago
You can do it in IE since version 5.5 ☺ http://msdn.microsoft.com/en-us/library/ms532979%28v=vs.85%29.aspx http://msdn.microsoft.com/en-us/library/ms532979%28v=vs.85%2...

gildas 15y ago

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