Multilayered web layouts

A few weeks ago I came up with the idea of having a web page with images composed of multiple layers and the layers could move differently when the object is resized.

And here it is.

Of course we all see web 2.0 pages with a lot of resizable and draggable menus, images and all imaginable things, but I decided to do it very clean and very easy to understand, after all is just a proof of concept.

So, I made 3 gifs with transparency and layered one on top of the other with some CSS and made it so that when you resize your browser window, the image resizes and shows a multilayered move effect.

The use of a technique that allows cool effects while the page is being resized is certainly of limited use (while, not completely useless) .

However, the real power of this technique lies on the fact that the technique could be applied to any HTML element that resizes, and beyond, with simple adaptations you could move the layers when mouse eventa occur. If you have seen script.aculo.us or any other library of the kind you know what I mean.

To accomplish this, I only needed this HTML

<div id=“out”>

  <div id=“in”>

    <h1><span>Sky</span></h1>

  </div>

</div>

and this CSS

#out {
  height: 40%;
  background: #9cf URL(out.gif) top left;
}
#in {
  height: 100%;
  background: transparent URL(in.gif) center;
}

h1 {
  height: 100%;
  background: transparent URL(h1.gif) bottom right;
}

h1 span {
  display: none;
}