Crazy CSS

Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • xyrial

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

  • http://www.sitepoint.com AlexW

    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. ;)

  • http://percept.be Percept

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

  • http://www.madproject.com madproject.com

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

  • http://www.igeek.info asp_funda

    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

  • http://simon.incutio.com/ Skunk

    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