CSS Pencils

Stunning display of just how far CSS can be taken, given sufficient patience and a little imagination: There are no images on this page. Near as I can tell, he ran a bitmap through an image analyzer to determine the value of each pixel and translated each one into a corresponding DIV with matching CSS color value. He then created PHP transforms to let you drop channels, go grayscale, etc.

I’m not sure exactly how useful this is in practical terms, since the amount of CSS it takes to create a photographic representation exceeds the number of bytes it would take to represent the image as a JPEG, but it does seem to open a lot of doors for as-yet unimagined CSS designs. You’ve got to respect him just for showing that it’s possible. Check the fawning comments.

Described this to a non-geek friend and his only reaction was “That guy must have a lot of time on his hands.” Some people, ah swear.

Music: Linton Kwesi Johnson :: Di Black Petty Booshwah

3 Replies to “CSS Pencils”

  1. sweet merciful crap!

    That is amazing.

    Hopefully it will evolve into some great simple code snippets for easy rounded corners and transparency.

  2. Just thinking… If you automate this with a cgi app or something similar you could create pages that display images for browsers that for some reason can’t display images (console based) but could render CSS.

  3. i am moderately impressed with the achievement, but more so impressed with the fact some one could muster the motivation to do such a thing.

    I am glad these people exist. Nothing would get done with a world of me.

Leave a Reply

Your email address will not be published. Required fields are marked *