By Simon Willison

Crazy CSS

By Simon Willison

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.

  • xyrial

    Very good examples of useless use of CSS, but.. what a wonderful examples. :)

  • I’m kinda surprised Spammers haven’t tried the pencils technique to get an image through when all others are blocked. They probably have.

  • Cory M.

    Tantek’s site map [I]does[/I] work in Internet Explorer 6 for Windows, by the way. ;)

  • Alex, I don’t think spammers are the best CSS-ers :)

  • AlexW, that would make for some pretty BIG e-mails.

  • Cool demos, really!! That CSS House is awesome. Never seen such a clever manipulation, but CSS Pencils stole the show. Though they don’t have any practical use, but its like what Simon & Chris say, pushing CSS to extreme. ;) :D

  • IE6 can handle the hexagons? Cool, I didn’t realise that. I’ll try it out at work tomorrow.

  • a guy

    ok the reason spamers use images is because they put a querystring on the end like this ?something=this they use this to know if the email is active b/c if the image is requested form the server with that querystring then someone must have opened the email

Get the latest in JavaScript, once a week, for free.