Skip to main content

Crazy CSS


Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

There’s a long tradition in the CSS community of pushing CSS to its limits to discover new tricks. These experiments are inherently valuable, as no matter how bizzare or useless they may seem they help improve people’s understanding of exactly how CSS works. Case in point: Chris Hester’s CSS Pencils, where CSS and a lot of div elements are used to display an image that looks for all intents and purposes like a standard gif, jpeg or PNG. A styleswitcher can be used to change the image. This technique has precisely no advantages over normal images, and comes with a hefty additional bandwidth overhead. However, it still demonstrates some interesting points about CSS, which Chris expands upon in his explanation of the demo.

While we’re on the subject of weird CSS tricks, Border Slants is something every CSS user can benefit from understanding. It’s the trick behind the impressive Sweet Heart demo, and the driving force behind Tantek’s awe inspiring hexagonal site map (doesn’t work in IE/Windows, but does work in pretty much every other modern browser). Chris Hester’s CSS House also makes extensive use of this technique.

Related Articles

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript

A practical guide to leading radical innovation and growth.

Integromat Tower Ad