Most people who have put together a website have at least heard of CSS. Cascading Style Sheets allow you to set custom styling on your website which remains consistent across all pages and all items of the same type. It allows some creative designs on items. For some, it can be more creative even than that. A number of people are exploring how to create images entirely based on CSS for websites. You may ask why on earth anybody would want to do that, and there are a number of reasons. Firstly, coders always fancy a challenge, to see how far they can push something and try to produce more powerful results. Simpler than that though is the fact that, in general, a CSS generated image is massively lighter than a jpg/png image. This means that your page loads faster on your visitor’s browser, and the faster the page loads the less likely they are to leave before they see your content!

Roman Cortes

Roman Cortes has produced a number of amazing examples of this.

The first one I came across was his rolling can of coke, click here to check it out. Scroll in the box to see the full effect.

Browsing from there the creation of Roman’s that had the biggest impact was the 3D Meninas, click here to check it out. Hover over the image and move from side to side to see the effect.

As a lover of code, I have such admiration for this use of CSS in a creative way. Roman on his blog has also created fun effects using tiny pieces of javascript code.

Can you find more examples? Post them in the comments section below!