CSS_Trans - Window!

c s s _ t r a n s - Window!

This is a window created entirely by CSS!

Okay, so maybe this isn't the best example of this CSS effect. I actually threw this dumb demo together in about fifteen minutes, so cut me some slack.

So how does this work?

The basic premise is very similar to CSS_Trans, except here we have a non-fixed (scrolling) background for the main body, and a fixed (non-scrolling) background for the text-boxes. The end result is something that looks somewhat like looking out a window. Heck, this demonstration even has a bug trying to escape!

Basically, we first set up the BODY properties with a non-fixed background:

BODY {
    background: black url(wood.png) 0 0;
}

Next, we set the background and color for the window-boxes:

div#content {
    background: #82b2da url(sky.png) 0 0 fixed;
}

Note that here we do fix the background (so it does not scroll). This is important to ensure we get the appropriate parallax for our windows.

Woah, this has different glass

This window is different because we actually use a third image, sky-glass.png, to make a different glass effect.

Here, we use the exact same syntax as before, but instead direct the browser to this alternative image.

Note that you will probably want to keep extra images down to a minimum since the more images the client has to request, the longer it will take for the page to render. But you already knew that, right? You're already the type of web-designer that is considerate of your users, aren't you?

Where did you get these images from?

The images are bad, I know. The wood pattern is from The Gimp. The bug is from Gimp-Savvy, from their Copyright-Free image archive (I forget which resource it was specifically). The sky image was something I made in The Gimp using various plugins.

This example sucks

Yeah, I know. This really is the "Plan 9 From Outer Space" of CSS examples. But it gives you an idea of what you can accomplish and how to go about it. I really do leave it up to you (the web-designer) to figure out something creative and pretty to use this technique on. If you would like some better looking (and, more often than not, more practicle) examples, then you really should be looking through Eric Meyer's CSS Edge pages.