Coke Can With CSS

I don’t know about the rest of you people, but I spend a lot of time working with CSS. Most of the time it’s extremely boring. Very rarely do I ever get to do anything interesting, and even when I do, I usually have to scrap it because it doesn’t work on that piece of shit known as Internet Explorer.

However, CSS can do some pretty neat stuff. Once CSS3 and HTML5 finally get finalized in 2156 things are going to be pretty awesome. But there’s still some pretty amazing things you can do with CSS right now. For instance, check this out:

First of all, I didn’t make that. It’s from Román Cortés and it’s done entirely with html and CSS. The concept that he’s using is actually fairly simple and doesn’t even use special CSS tricks. What you’re actually looking at is a whole bunch of <P> tags all lined up in columns. The tags start out small on one side, gradually get bigger towards the middle, and then get smaller again towards the other side. They all share the same background image and each tag moves the placement of that image forward a small bit, this creates the effect of a single image, albeit distorted in order to give it a 3D effect. Adding in background-attachment: fixed adds the real magic: causing the can to appear to rotate when you use the slider.

If you really want to take a closer look, open up firebug and take a look at it, it’s not even all that complicated. It is, however, stupendously awesome and I wish I had thought of it.