I’ve been messing with CSS3 a lot of late. And it occurred to me that using the height, width, and background-color attributes of div tags, along with some judicious use of floats and clears, one could make some pixel-perfect art without having to resort to images. I’ve been on a retro arcade game kick of late, so I thought some 80s arcade game characters would be fun. Here’s a screenshot of Pinky, of Pac-man fame, done entirely in HTML5/CSS3:
I made the “pixels” 18 x 18 and added a 1px gray border to emphasize each block. Here’s the page I used for the screenshot. View the source to get a clearer idea of what’s going on.
My inspiration for the piece was this mosaic version of Pinky (from space-invaders.com):
Given that I’m using HTML5, this could be accomplished much more easily via the Canvas element, but I was intrigued by the idea of divs-as-pixels. Crude as it is, it’s not without possible applications. If you make the divs 1 x 1, Pinky is quite a bit smaller than in the original arcade game. So there’s enough resolution to play with.
To be really useful, I’d have to write some sort of GUI app that could spit out the necessary divs. That wouldn’t be too hard, but I don’t think this one interests me beyond the proof-of-concept stage. Still, I might do the other ghosts to keep Pinky company.