Homer and Bush in CSS

Tuesday 29 April 2008

Román Cortés has done an amazing thing. He’s made portraits of Homer Simpson and George Bush. Here’s Homer:

o o o o ( O O O \ L ( O O O O O \ L ( O | | \ \ | | \ \ \ \ ( ( 8 o o o ( ( 8 o o o o ) ) b o O o o o o o o ) b o O o o o o o o o o o / / / • • • • • _ _ _ • • • C C O ( -

and here’s Bush:

o o o o o o o l o ´ ´ ` ) ) ( · o ` - - - · · o o - / 0 / - ( o o ` ` ( ( o \ ´ o o o o ` 0 ( \ - ` - · · o ( 0 0 ~ o o o o 0 0 0 0 ( ` ( o o o o o o o o - ‘ - 0 0 o o o o o o · • O ´ o o ` / · ( · ´ ) ` \ · · o o 0 0 • ` ` • / / - - - - o 0 o o o o o o o o - - - - • • • o o - • • • • • • ´ - - ( \ ( o o • • • • • ) • • • • • • • • • • • / / • ` • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ` ) ´ ` ` ` ` • • ´ ´ ´ ´ l `

Wait, those won’t look right without the proper CSS styling. Here they are as they are meant to be seen:

Homer SimpsonGeorge Bush

Yes, those really are characters styled to position them correctly to make the images. Go look at the HTML source on the original HTML pages to see for yourself.

This is oddly reminiscent of a similar Simpsons-themed artwork: Google groups ascii art: Bart Simpson.

Comments

[gravatar]

Ned. This post, unlike your kerning post, is truly one that is difficult to appreciate, let alone understand, if one is not a geek. Can you explain what you mean, for your fans who are technologically challenged?

[gravatar]

susan: These pictures are created by applying different styles to letters and positioning them on top of each other. If you follow the links and try to use your mouse to select part of the images you can see this.

[gravatar]

@Susan:




Ned's Fans
Technologically
Challenged



(Only tested this in Firefox, so apologies to folks on other browsers if Venn diagrams rendered in CSS aren't x-browser friendly :D )

[gravatar]

uhhhhh.... thanks. still don't get it.

[gravatar]

Robert,
There's probably a tiny dot where the two circles merge, and I'm in that section!

[gravatar]

@Ned: While previewing/submitting the above, I'm was getting a lot of "Something has gone wrong with the spinner?" errors. They're intermittent though - only manifesting ~75% of the time.

[gravatar]

@Susan: The first part of Ned's post - the list of symbols/characters - is the non-CSS-styled version of the Homer and Bush pictures. Just a simple list of characters. By applying CSS to change the font size, color, and positioning, Roman Cortes is able to create the pictures using just those characters.

For web developers this is just insanely cool on a number of levels. It's a rarely-if-ever-before seen way of creating images in web pages, the images are "vector based" instead of being bitmaps, which means they can in theory be scaled to any size, and they are (probably) much more compact in terms of the download size.

... and, they have all us geeks wondering if there's a way to automatically take bitmap images and create corresponding markup and CSS out if it. :)

[gravatar]

@Ned: I wouldn't say CSS - that's not css at all, it's more of a styling and html soup

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.