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
3 comments:
Suggestion: instead of proposing to vendors to create "yet another image format", what about petitioning vendors to accept the usage of MNG?
Layered Images would only be larger in size. CSS sprite would work perfect for what you are trying to achieve. Ther eis no need to try and get anoother image format adopted, I mean look at at how long its taken to get PNG fully supported in all major browsers.
Hey Suraj,
Good to see you taking interest in these things.
Good luck..
Post a Comment