How To Make Part of Web View Slightly Translucent?

Question

In Objective-C with Mac OSX Cocoa, is there any way to make a DIV on a WebView slightly translucent so that the desktop applications behind the window bleed through slightly, but only on that DIV and not the rest of the WebView?

Or perhaps I can make the whole WebView translucent, but turn it off for all DIVs except one DIV?

I have a WebView loading a web page. In the web page, I have a sidebar on the left, and then an IFRAME on the right. I click items on the sidebar and they change the IFRAME pages on the right. It's this sidebar that I want to make slightly translucent.

In my AppDelegate.m, I have this so far, and my HTML and BODY tags are set to background:none, and my sidebar is set to background:rgba(0,0,0,0.5), but all I end up seeing is a grey sidebar background. It's like the webview itself wants to ensure that it's background is set to a color other than clear.

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
  // note that _window and _wv are outlet properties to my window and webview widgets
  [_window setBackgroundColor:[NSColor clearColor]];
  [_window setOpaque:NO];

  [_wv.layer setBackgroundColor:[NSColor clearColor].CGColor];
  [_wv.layer setOpaque:NO];
}

Welt

Answer 1

Yes, just set the drawsBackground property of your WebView instance to NO, then make sure to fill the parts of the page you want opaque using CSS.

Voltz

Yes, that was the missing piece: _wv.drawsBackground = NO; and then on my CSS, I used rgba(0,0,0,0.5); on the #sidebar, and ensured my HTML and BODY tags were set to background:transparent;. I then colored the rest of the parts in. She works! Thank you. – Welt

Okay, so transparency is achieved. Now, if you had to support OSX Cocoa 10.8 and up, well-knowing that Apple's "vibrancy" filter API didn't arrive until Yosemite, how would you fake this light diffused opacity like what is shown here? Note that the answer selected doesn't work with less than Yosemite. The example given for prior to Yosemite only creates a white blur ball that isn't exactly like the Yosemite vibrancy effect achieved with NSVisualEffectView. – Welt

This is not really related to the original question so I suggest you open a new one. – Voltz

Turns out it's not possible. However, one can provide a way to enable it (without breaking the compile process by lacking a dependency) for 10.8 and up, but only activate the feature if it's 10.10 and up. Here's how. – Welt

Answer 2

Related Step by step Tutorial with examples:

http://stylekit.org/blog/2016/01/23/Chromeless-window/

Setting up translucency:

1. Set the styleMask of your NSWindow subclass to NSFullSizeContentViewWindowMask (so that the translucency will also be visible in the titlebar area, leave this out and the titlebar area will be blank)
2. Set the self.titlebarAppearsTransparent = true (hides the titlebar default graphics)
3. Add the code bellow to your NSWindow subclass: (you should now have a translucent window)

.

let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 0, 0))//<---the width and height is set to 0, as this doesn't matter. 
visualEffectView.material = NSVisualEffectMaterial.AppearanceBased//Dark,MediumLight,PopOver,UltraDark,AppearanceBased,Titlebar,Menu
visualEffectView.blendingMode = NSVisualEffectBlendingMode.BehindWindow//I think if you set this to WithinWindow you get the effect safari has in its TitleBar. It should have an Opaque background behind it or else it will not work well
visualEffectView.state = NSVisualEffectState.Active//FollowsWindowActiveState,Inactive
self.contentView = visualEffectView/*you can also add the visualEffectView to the contentview, just add some width and height to the visualEffectView, you also need to flip the view if you like to work from TopLeft, do this through subclassing*/

Sanity

Question. Haven't tried this yet. What happens when you move or minimize the window, then open it back up again? Does it keep the translucency, or do you have to apply the effect again? – Welt

BTW, this effect requires Yosemite or higher. – Welt

Oh, and you've posted Swift code on an Objective C tagged question, but it's not so hard to convert. – Welt

Both languages are sort of intertwined though. Im not sure if there is a convention for not posting swift answers in obj-c questions. As OSX marches on I think this will happen more often than not. – Sanity

You can move, minimise, and even add video behind the translucency. OSX renders this in their Core graphics engine on the graphics card. So everything will be smooth and cpu friendly. The article i refer to will be updated as time goes on to add such examples. – Sanity