No Images Were Harmed...

May 2, 2004 7:46 AM

CSS Pencils is probably the most hardcore use of CSS I've seen - no images at all, but hey - what's that? A picture? And you can manipulate it? Live? Yep - all with the power of CSS!
posted by benzo8 (34 comments total)

So... am I reading that right... there's a div for each "p" (which I'd guess means pixel). Geez. Talk about brute force...
posted by jpburns at 8:03 AM on May 2, 2004

I've seen similar projects - one did the same thing, only rather than using divs, used individual table cells.

Anyway, while this is interesting, it's not at all practical. It takes a long time to load, and the file size for the page is significantly larger than a gif or jpg of the image would be.

Still, it is pretty neat.
posted by aladfar at 8:17 AM on May 2, 2004

You can't even apply more than one filter/operation at the same time.

Didn't we already have this with the huge ascii-art penguins and such anyway?

</unimpressed>
posted by fvw at 8:20 AM on May 2, 2004

OCD meets CSS.
posted by shecky57 at 8:32 AM on May 2, 2004

From the about page:

"So what gives? There's an image on screen! But no image file is used. Instead each pixel is built with CSS. But it would be crazy to do an image pixel by pixel. Instead I've made use of borders. These give me three pixels at a time. One pixel comes from the left border of a div, the second pixel from the background colour, while a third pixel comes from the right border. This means less data, but still a lot of code!"

I'm not sure it's indicative of the "power" of CSS as such, as clearly CSS is not good at this sort of thing. However, that doesn't seem to be his point, as he acknowledges the lack of practicality.
posted by nthdegx at 8:34 AM on May 2, 2004

I saved the source for that page. 45k. An image that size in jpg format would be, what? 4k, tops?
posted by crunchland at 8:35 AM on May 2, 2004

Neat, reminds me of the border slant trick.
posted by bobo123 at 8:47 AM on May 2, 2004

epicycles, I'm telling you, epicycles ...
the pencils crashed my IE ... however I like his web design
posted by MzB at 9:29 AM on May 2, 2004

This is possibly one of the most pointless things I've seen. Not only is it a vastly inefficient way of storing an image as crunchland pointed out, but there's a separate stylesheet for each image, so it's not really any more clever than just having several jpeg files and switching between them with a bit of JavaScript (some efficiency would be achieved by sharing 'id' attributes between the div tags for pixels of the same type, but they don't appear to do that). It illustrates how to change stylesheets without reloading the page, but other than that it's utterly inelegant (and it crashed my browser).
posted by Singular at 9:46 AM on May 2, 2004

thats pretty powerful. that 25x25 picture of colored pencils turned green.
posted by Satapher at 9:47 AM on May 2, 2004

yeah, I didn't mean to be so dismissive. I imagine there'd be ways to hack the thing down to make it more elegant and less brutish.
posted by crunchland at 9:54 AM on May 2, 2004

The assertion that "there are no images on this page" is curious, is it not?
posted by Ethereal Bligh at 10:07 AM on May 2, 2004

Crashed Firefox 0.8 as well.
posted by Orange Goblin at 10:08 AM on May 2, 2004

ceci n’est pas une crayon.
posted by shoepal at 10:27 AM on May 2, 2004

Hunh. Firefox works for me Orange Goblin.
posted by bonehead at 10:27 AM on May 2, 2004

This is possibly one of the most pointless things I've seen.

I agree! I loved it! The world needs much, much more of this sorta thing.
posted by 327.ca at 10:44 AM on May 2, 2004

Shoepal: exactly!
posted by Ethereal Bligh at 10:54 AM on May 2, 2004

This is the sort of thing that lots of us think about.. It usually goes as far as "Hmm, yes - you could make an entire image out of javascript/css-manipulated divs - you could even get PHP to read in the image on the server and output the exact JS/CSS necessary to render an identical image on the client! But the amount of data actually transmitted would be at least an order of magnitude greater than a jpeg and it would require unreasonable amounts of client processing time to display. Yes, it would work, and it would be novel but useless."

Looks like this guy had the same thought, without the last two words. Or maybe with "but I don't care!" tacked on the end.
posted by cell at 11:00 AM on May 2, 2004

There's an ongoing trick of using tables for this. This is a case where tables are way, way better than CSS, IMO. See a little Tcl script I wrote a while ago.
posted by abcde at 11:19 AM on May 2, 2004

Er, way better than DIVs, that is.
posted by abcde at 11:20 AM on May 2, 2004

What a bunch of grumps. It's just for fun, man.
posted by majcher at 11:27 AM on May 2, 2004

yeah, it coulda been worse. He coulda added FLASH navigation.
posted by crunchland at 11:48 AM on May 2, 2004

Firefox worked f/ me, too. And it could conceptually be a neat concept, if refined better. But itty-bitty dots of color in tags? Neh, not for me.

I was way more impressed with Sweet Heart (thanks, Zeldman!).
posted by volk at 11:51 AM on May 2, 2004

It'd be more entertaining if you could distort the dimension of the image and colors with a random DHTML script, so that it appears in a random, bizarre way with each visit to the page.

Anyway, Flash does all this and more in a much more efficient manner, so if you're going to be frivolous, why stick to a standard?
posted by Down10 at 12:56 PM on May 2, 2004

I saved the source for that page. 45k. An image that size in jpg format would be, what? 4k, tops?

in addition to the html source, the css file for this is located at http://www.designdetector.com/tips/css/default.css and weighs in at 195K (200,077 bytes).
posted by quonsar at 1:49 PM on May 2, 2004

yeah, I thought of that after I hit POST.
posted by crunchland at 2:35 PM on May 2, 2004

This is a case where tables are way, way better than (divs)

I can think of many cases in which it's easier to create bloated, inefficient code using tables instead of divs.
posted by DrJohnEvans at 5:15 PM on May 2, 2004

Yeah, I said "a case."
posted by abcde at 6:30 PM on May 2, 2004

That would explain the lengthy download time, quonsar. What amuses me about this site is not that it's possible to perform such graphic manipulations using CSS, but that someone actually took the time to do so. It's impressive, in a "largest ball of twine in the world" way.

"Look! I built a two-story Colonial home entirely out of toothpicks!"
posted by FormlessOne at 6:50 PM on May 2, 2004

abcde: True! I just felt the need to point out the obvious parallels.
posted by DrJohnEvans at 9:51 PM on May 2, 2004

There's an ongoing trick of using tables for this. This is a case where tables are way, way better than CSS, IMO

Si, si. This is a cool proof of concept/"because it's there" kind of thing, but from both a semantics standpoint and a practicality standpoint, if you're going to be coding a grid of 1x1 pixels of various colors, table markup would make good sense.

Of course... what might make more sense is if you could simply take the information of that grid of pixels, and somehow embed that in a file... and then tell the browser what external application to use in viewing it. Over time, you could even work viewing application for some common formats into the browser itself for "inline" viewing...
posted by weston at 11:43 PM on May 2, 2004

@weston: OMG! patent that idea NOW
posted by SNACKeR at 5:01 AM on May 3, 2004

i actually tried something like this once, several years ago - took a series of 25 x 25 px images and blew them up into larger ones, using 10px by 10px squares (1 square = 1 px from original image). my idea was that clicking on each square would eventually load up a different image. i think i coded a total of 1.5 images before i gave up... it was i think an interesting concept but without some sort of automated script to translate pixel into css it was also pointless, tedious, and the end result really wasn't that interesting. had i just used gif, png or jpeg the entire thing could easily have been done in the amount of time it took me to code that one original image.

so (from personal experience) i file this link under "too much time on my hands".
posted by caution live frogs at 6:47 AM on May 3, 2004

it was i think an interesting concept but without some sort of automated script to translate pixel into css it was also pointless, tedious, and the end result really wasn't that interesting.

Me too. Began such a project and abandoned it quickly.
posted by eustacescrubb at 7:39 PM on May 3, 2004