Images with pure CSS.

[egillsigurdur]

I was just messing around with some PHP code, and I came up with this:
http://egillsigurdur.com/cros/index.txt

(I really don’t want to have a live example, it could be to much for my server)

Try this code out.
It pretty much creates 1px*1px divs, creating a small image, but doesn’t use images at all.

Has this been done before?

[egillsigurdur]

Er, ikthius, dude, it’s just that I think it could be to much for my server, Firefox crashed when I put a 2MB picture on.

But, if you insist, here is a live demo, using the exact code:
http://egillsigurdur.com/cros/indexblabla.php

But you must not put anything that’s bigger than about 100*100 pixels or something, and this doesn’t work with transparency.

[TheDoc]

Sooooo, what is this actually doing? All I got was some black and blue block… which wasn’t really an image at all. What is the script trying to do?

[Matt]

It’s a step in the right direction.

[blue642]

I uploaded this on my server a few days ago, along with an image and it kept saying "no picture selected" when I hit submit…

today I tried a small google png I found through google. got an error message, which may have been because it used transparency (I’m not sure, not my image.)

So I found another small full color/no transparency image. Worked like a charm!

this is cool. and intresting to open up firebug to see 8100 divs…. Neat idea.

[Chris Coyier]

I think it’s pretty clever and a fun proof of concept. Probably falls into that camp where it’s impractical in any scenario I could think of, mostly because there would be a heck of a lot of scrolling and copying and pasting to update any graphics, and browser memory usage would probably be pretty high.

Although… (and maybe you had this in mind the entire time), you could do it all server side on the fly.

Like:

<?php div_pixelize("image.jpg"); ?>

Or maybe even somehow parse PHP before it goes out looking for all <img> elements and replacing them with this function.

[Author]

Posts