Homer and Bush in CSS

Tuesday 29 April 2008 — This is over 16 years old. Be careful.

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:

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

susan senator 8:55 AM on 30 Apr 2008

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?

jhr 9:19 AM on 30 Apr 2008

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.

Robert 9:21 AM on 30 Apr 2008

@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 )

susan senator 9:23 AM on 30 Apr 2008

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

susan senator 9:24 AM on 30 Apr 2008

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

Robert 9:24 AM on 30 Apr 2008

@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.

Robert 9:31 AM on 30 Apr 2008

@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. :)