HTML Desktop App - How to: Blurry Background?

Question

I'd like to start working on HTML Desktop Apps for Windows again. I haven't yet decided on which Framework I am gonna build it on, so I am rather flexible about this. Now.. there is one requirement that I have though: Within two of the apps that I want to create I want to have a transparent background, that is not only transparent but will also blur whats underneath it - similar to an effect you got all over OSX Yosemite and the latest iOS

Here you can see a picture of the effect that I roughly want to achieve : https://d13yacurqjgara.cloudfront.net/users/107587/screenshots/1598097/vk_os_x_player_dribbble.png

Now, does anyoneone know how to achieve that in.. say.. AppJS or Chrome Packaged apps or with TideSDK or node webkit ?

Edit - When I try to do the suggested stuff with an AppJS programm I just get a black background. Not a transparent one. I think I also know how to achieve that, in a browser. But not in an app that is supposed to run on a desktop.

Answer 1

#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}

Answer 2

Windows has a native method that accepts a window handle and allows you to achieve the blur you're looking for. See this example on how to use the method in C/C++. If you want to be able to call this from node-webkit code, then you'll likely need to use node-ffi to get the job done.

Even with both of these things, I have never personally tried to access the window handle for a window created by node-webkit, so I don't even know how easy/difficult/possible it actually is, but I hope that this at least gets you started.