With CSS 3 getting in shape and gaining more attention and popularity there will be a time - in the far future - when every major browser supports the standard. Lately I started dreaming a bit and this is what I found:
Working Around CSS Limitations With Images
Currently building web applications with challenging design and even websites with relatively simple design are a pain in the ass because of the limitations of HTML and mainly CSS. You need to work around that using images even for trivial optical effects like rounded corners or gradients.
The (heavy) usage of images of course comes at a cost (especially when not being aware of how to avoid some of the extra load): Additional HTTP requests are needed to load those images which require more DOM nodes to be all in the right place. A simple box with rounded corners may need at least four slices to display correctly - upper left, upper right, lower left, lower right. Faking those behaviour with dozens of nested divs is an even uglier option which additionally blows the DOM without any need.
So what can we do about that?!
CSS 3 Is The Answer
CSS 3 allows you to do a lot of that fancy stuff by just adding CSS rules. The browser engine will do all the work for you without the price of any extra images or even additional DOM-nodes.
So far, so good. But we still need to figure out where such a replacement could be helpful and how the CSS rules should exactly look like.
CSS 3 Image Replacement Example
I gave it a try with the iphones ipod icon which was quite tricky. The following example will only work properly in FF.
| Original Icon As PNG | CSS 3 Icon |
|---|---|
 |
I didn't find a solution for the ipod shape in the middle of the icon. It seems that there is currently no solution for masking or filtering layers as you do it in Photoshop. So I created a PNG-24 image with the white ipod shape and simply put it on top. That is of course not the desirable result. May be someone can help me out here or can point to other examples?
Tool-Based Recreation Of Images As CSS 3 Rules
At this point I had the vision of a tool in which you can throw in your images. The tool should analyse the image and look if the same effects can be reached with CSS3. If so it simply prints out the rules.
What do you think? Could this be done? Where are the problems? Which tools and libs might build a foundation for such a tool?
Thanks for following
freak