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 posts:
- 101 Essential CSS Tips, Tricks & Hacks The team at SitePoint is pleased to announce a new...
- Interesting CSS Quirks: Border-spacing I came across a CSS peculiarity recently that had me...
- Zoom In With A jQuery Plugin Anything Zoomer is a jQuery plugin which allows you to...
- A Little-known Way to Replace Some Scripts with CSS Counters Replacing executable scripts with style sheets often improves performance and...
- The Two Ways of Sizing Absolute Elements in CSS Most developers have used left, right, top and bottom properties...
Very good examples of useless use of CSS, but.. what a wonderful examples. :)
May 2nd, 2004 at 8:39 pm
I’m kinda surprised Spammers haven’t tried the pencils technique to get an image through when all others are blocked. They probably have.
May 3rd, 2004 at 1:02 am
Tantek’s site map [I]does[/I] work in Internet Explorer 6 for Windows, by the way. ;)
May 3rd, 2004 at 7:40 am
Alex, I don’t think spammers are the best CSS-ers :)
May 3rd, 2004 at 10:40 am
AlexW, that would make for some pretty BIG e-mails.
May 3rd, 2004 at 12:20 pm
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
May 3rd, 2004 at 4:22 pm
IE6 can handle the hexagons? Cool, I didn’t realise that. I’ll try it out at work tomorrow.
May 4th, 2004 at 2:05 am
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
January 26th, 2007 at 11:44 am