Website Design

Glass container

Works with:
FF3
Chrome
IE6
IE7
Opera
Safari

Description

Position your components anywhere on the screen and retain a glass blurred background in the container. Simple but stunning effect. No matter how much I can't stand Windows Vista, I have to credit it for the inspiration - credits to the aero theme used in Windows Vista. Note: if using this technique as a background-image for a website, it works best if the background-image used for the background and the containers is set to fixed. Then the background position does not need changing with the position.

Demo

Box Header - Drag me around and see what I do

Some dummy text goes in here

This the second box

This one has a fixed height and width

CSS

  1. #background {
  2.     height: 500px;
  3.     border: 1px solid black;
  4.     background: url("bg2.jpg") white top left repeat scroll;
  5.     overflow: hidden;
  6.     position: relative;
  7. }
  8.  
  9. .glass_container {
  10.     background: url("bg2-blurred.jpg") white -20px -20px repeat scroll;
  11.     top: 20px;
  12.     left: 20px;
  13.     width: auto;
  14.     height: auto;
  15.     float: left;
  16.     clear: both;
  17.     position: absolute;
  18.     padding: 20px;
  19.     border-top: 1px solid white;
  20.     border-left: 1px solid #CCCCCC;
  21.     border-right: 1px solid #00B9B9;
  22.     border-bottom: 1px solid #009797;
  23.     color: black;
  24.     cursor: move;
  25.     opacity: 0.9; /*CSS 3*/
  26. }
  27.  
  28. #box2 {
  29.     background-position: -390px -100px;
  30.     left: 390px;
  31.     top: 100px;
  32.     width: 300px;
  33.     height: 300px;
  34. }

XHTML

  1. <div id="background">
  2.     <div class="glass_container">
  3.         <div title="Click and hold me to drag the window" class="draw_bar"></div>
  4.         <h1>Box Header - Drag me around and see what I do</h1>
  5.         <p>
  6.             Some dummy text goes in here
  7.         </p>
  8.     </div>
  9.    
  10.     <div id="box2" class="glass_container">
  11.         <div title="Click and hold me to drag the window" class="draw_bar"></div>
  12.         <h1>This the second box</h1>
  13.         <p>
  14.             This one has a fixed height and width
  15.         </p>
  16.     </div>
  17. </div>