See through effect with CSS (like iOS 7/Aero)

Question

I am trying to design an application that runs on Node-Webkit. I have this crazy idea for the background, but I have no idea how I should approach implementing this with CSS.

This is the app how it looks right now:

I would like to give all dark green/blue backgrounds a see through effect (there are two, the darker for the top and the slightly lighter for the toolbar). Like this: (mock up, background is maybe a little too blurred)

I do not aim for a solution that has real see-through windows (like aero and iOS 7/OS X 10.10). A faked effect with a predefined, static background image is fine (which does not have to move when the window position change). The implementation has to be memory and performance efficient.

I want to specify the type of background (dark or light) by setting the class of each element (like the tabs, toolbars, etc) to 'bg-dark' and 'bg-light'.

The approach I would take is this:

1. create two images, one for the darker background and one for the lighter background. (1920x1080px each, because my app must handle full screen nicely)
2. give each element a background class 'bg-dark' or 'bg-light'. This class defines a CSS background image.
3. with javascript, for each element in a certain class, calculate a value for background-position.

The issue that I see with this approach is that for each element, webkit/blink has to load the entire background image to memory. Is this true? Is there a better, more sane way to do this? It doesn't have to be cross-browser friendly, as I only need it for a Node-Webkit app (which uses one of the latest blink engines).

Edit: Note that CSS opacity does not do the trick. I want the background to be kind of blurred, so simple transparency is not sufficient. Also, if the selected tab was actually translucent (opacity < 1), the dark topbar whould show through (which is not what I want).

Answer 1

In CSS there is a feature called transparency. Maybe this will get you through this.

.transparent {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

With this you don't need to load another image which will consume memory and bandwith.

€dit: missed source: http://css-tricks.com/css-transparency-settings-for-all-broswers/

Answer 2

opacity is a way to do that.

But beware that it'll make entire container transparent.

ex:

container{
    /* IE 4-8 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* All Modern Browsers */
    opacity: 0.5;
}

In order to make only background transparent, I'll Suggest You to use transparent background-color.

AS:

container{
background:rgba(150,255,255,0.5); /*IE 9+*/
}

rgba stands for red,green,blue & alpha. I think that's what you're looking for.

Hope it'll help you.

Answer 3

Please monitor #issue132. It would be a feature later.