0

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.

Escapado
  • 117
  • 2
  • 12
  • Looks like a gradient to me. But you can do blurs using css filters. – xdhmoore Jan 06 '15 at 16:51
  • 1
    This question has been asked before: http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css – Chris Jan 06 '15 at 16:51
  • Okay to clarify: I am specifically not asking how to achieve the effect in general, but how to achieve it n a packaged app. For example if I try to do that with an AppJS App, it simply won't work for the application window. It won't blur my windows background, it will not even go transparent. In TideSDK it is basically the same problem. I can't get it to blur the applications or my desktop behind it. – Escapado Jan 06 '15 at 18:13

2 Answers2

0
#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}
Chris
  • 453
  • 3
  • 15
  • Could you add more info, maybe some more concrete html that would go along with this CSS that would achieve the desired effect? – Patrick Gunderson Jan 06 '15 at 19:00
  • While this works perfectly if that div is placed over .. say .. and image, it won't work on the background of a packaged app, built with AppJS or TideSDK. In that case the background is just black or white and it doesn't blur anything behind it and by behind it i mean my windows desktop or which ever window I put behind it. – Escapado Jan 07 '15 at 11:12
  • If you are ausing a solid background - you will not be able to see the blur in action. YOu could maybe add a tint to the colour so that the box is still visible? – Chris Jan 07 '15 at 11:15
0

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.

kevin.groat
  • 1,274
  • 12
  • 21
  • Thanks for the trick, but the comment under the article states that it's not gonna work with Windows 8. So I guess it's not viable for me. On a sidenote: can this effect be created by somehow reading the frame buffer, then blurring the image, set the needed region as a background and update this 60 times per second or would that be a performance issue? – Escapado Jan 18 '15 at 11:35
  • I have never attempted to create a blurring effect in that manner before, so I really cannot say if that would be a performance issue, or if it would even achieve the desired effect. – kevin.groat Jan 21 '15 at 01:45