Well this workout is all about creating visual containers, which we often use for creating web pages. Consider a case where in there is a web page with various visual container like above image. Now With current version of css & browser compatibility, at last what we can do is create three separate images & using them as background image or either we can even use css sprites.
But can we put it this way. I have considered a image format (may be adobe can come up with this) which can save images like above with layers & the browsers (or say other computer program) starts understanding them pretty well & if we can come up with a css version where in we can write the following code. (I have slightly offset the images in order to see the layers)
First layer for the first visual container
.myVisualContianerOne {background-image:url(../images/visual-container.gif) center top no-repeat; background-image-layer-position:top;}
Second layer for the second visual container
.myVisualContianerTwo {background-image:url(../images/visual-container.gif) center top no-repeat; background-image-layer-position:middle;}
Third layer for the third visual container
.myVisualContianerThr {background-image:url(../images/visual-container.gif) center top no-repeat; background-image-layer-position:bottom;}
How this workout will be helpful
- It is beneficial in order to reduce the no of images required for visual Containers.
- Reducing the HTTP requests to server.
- Lesser download time
