Here's Román Cortés' Homer, animated to show the structure. I haven't done anything to Román's amazing work other than to annotate the divs with ids and add a bit of jQuery to show them in sequence so that you can see the characters being added one at a time.

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
(
-

Click your choice of fast or slow animation:

Román also made a George Bush.

PS: if this doesn't look right for you, it may be that you are on Linux and don't have the Verdana font. You can install it from the msttcorefonts package.

tagged: » 89 reactions

Comments

[gravatar]
Al 9:39 AM on 1 May 2008

I can only imagine how long that must have taken to put together.

[gravatar]
Roman Cortes 11:06 AM on 1 May 2008

Man, this is awesome! I was too lazy to do it by myself, I thought in a gif animation, but this way is much better, great job. Could you send me an email please, I would love to post this thing as a link in my blog!

[gravatar]
mike bayer 11:41 AM on 1 May 2008

ned, you rock !

[gravatar]
n[ate]vw 12:09 PM on 1 May 2008

Brilliant! I was just trying to explain that to my wife last night, who did some HTML in high school but wasn't quite understanding the concept. To be honest, I really couldn't see how the bulk of it was done either, so I wasn't explaining very well!

[gravatar]
Noah Kantrowitz 1:05 PM on 1 May 2008

Ned == 'awesome'

[gravatar]
Aaron 4:13 PM on 1 May 2008

That's pretty hilarious.

[gravatar]
Chris Papadopoulos 4:14 PM on 1 May 2008

I love these types of projects. Really creative and neat trick!

[gravatar]
Bob 4:20 PM on 1 May 2008

Brings new meaning to the term "ASCII Art." :)

[gravatar]
keithpeter 4:36 PM on 1 May 2008

Bloody Hell! [ that's Mancunian for 'well impressed']

I'll spend the holidays deconstructing the css

[gravatar]
JEff 4:48 PM on 1 May 2008

holy crap.

that's completely ridiculous.

[gravatar]
stephen 4:53 PM on 1 May 2008

And people say *I* have too much time on my hands!
Still, I'd liked watching to see the letters used.

[gravatar]
Michael Campbell 5:12 PM on 1 May 2008

Ho.ly.Cats.

OutSTANDING!

[gravatar]
Faraz 5:16 PM on 1 May 2008

jQuery Rocks...

[gravatar]
Nathan 5:27 PM on 1 May 2008

...and it was done in "ems"?!?!? This man is my hero!

[gravatar]
russdogg 6:22 PM on 1 May 2008

Shut up, Flanders!

[gravatar]
zyo 6:36 PM on 1 May 2008

impressive! It's really the new css art !

[gravatar]
James Carlos 6:41 PM on 1 May 2008

can I get some absolute positioning?!

[gravatar]
Travis Bell 6:56 PM on 1 May 2008

Dude... you must have more spare time than me. I am now envious.

Cool!

[gravatar]
tevan 7:03 PM on 1 May 2008

incredible, román and ned!

[gravatar]
Sujay 7:07 PM on 1 May 2008

Incredible.... good work buddy!

[gravatar]
Sebastian Lewis 7:28 PM on 1 May 2008

O||\\||\\\\((8ooo((8oooo))boOoooooo)boOooooooooo///•••••___•••CCO(

Brilliant, it's like the rebirth of ASCII art.

Sebastian

[gravatar]
David D 7:48 PM on 1 May 2008

Killer! I agree, you've got TOO much time on your hands.
Do a copy, then paste into Word to see the characters, sizes, and colors involved. I think this is all of them (in ascii). 84 characters, from what I can tell.

oooo(OOO\L(OOOOO\L(O||
\\||\\\\((8ooo((8oooo))boOoooooo)boOooooooooo///•••••___•••CCO

[gravatar]
Umbu Wumbu 10:37 PM on 1 May 2008

Calouste Gulbenkian, despite his best efforts and tons of money, is dead and has been dead for quite a long time. So quit trying to wake the dead.

[gravatar]
Sam Stigler 1:07 AM on 2 May 2008

Wow... does anyone know much time it took him to make this?

[gravatar]
pb 1:44 AM on 2 May 2008

make it cross platform. THEN you'll be my hero! ;)

[gravatar]
slimpo 3:10 AM on 2 May 2008

I don't get it. It still doesn't show up correctly. It's more clear what's going on but that doesn't make this a real Homer.

[gravatar]
Ibrahim Hussein 3:40 AM on 2 May 2008

Amazing!! It shcoked me when i first saw it. This guy has way too much time on his hands, and it is the re-birth of ASCII art.
Expect to see more of this sort of art soon to invade the interwebs.

[gravatar]
Sebhelyesfarku 4:24 AM on 2 May 2008

slimpo you are a moron.

[gravatar]
jimothy 6:47 AM on 2 May 2008

Hi diddly ho, Ned! That's great. And hats off to you, Roman.

[gravatar]
r 7:32 AM on 2 May 2008

stupid flanders... xD

[gravatar]
Colin Nash 7:33 AM on 2 May 2008

woah! - damn that be an awesome trick!

[gravatar]
dave 7:49 AM on 2 May 2008

I think someone has a little bit too much time on their hands, but time well spent.

[gravatar]
Casey Wise 7:50 AM on 2 May 2008

Brilliant work and bookmarked! I thought I was looking at Flash initially. jQuery rocks... I use it extensively.

What a great demonstration! I'm calling this a tutorial, I had never conceived something like this done with CSS+JS. To say "you got the gears turning in my head" would be massively understating it.

Thank you for taking the time!

[gravatar]
danbhala 8:14 AM on 2 May 2008

wow! thats is unbelieveable! well done! have just passed this onto all my css mates

[gravatar]
Samo 8:22 AM on 2 May 2008

You must have mild Autism to have the patience to do something like this.

[gravatar]
Spamboy 8:31 AM on 2 May 2008

That totally made my morning. Thanks!

[gravatar]
Andrew 8:33 AM on 2 May 2008

Did a sudo apt-get install msttcorefonts, restarted Firefox, and everything looks good.

[gravatar]
seawolf167 8:58 AM on 2 May 2008

holy crap thats awesome

[gravatar]
nepspeed82 9:03 AM on 2 May 2008

I want to know how you did it. Amazing.

[gravatar]
johnny cash 9:04 AM on 2 May 2008

Amazing! Can you do a caricature of Ken Livingstone

[gravatar]
Matthew Wallace 9:25 AM on 2 May 2008

Wonder if it looks like crap in ie6 ?

[gravatar]
Charlie 9:27 AM on 2 May 2008

Wow! it even scales up in font size smoothly

[gravatar]
jive 9:32 AM on 2 May 2008

SVG will eliminate having to do it this way, if IE ever supports it. But I imagine the reason behind this was to build it not using SVG ;) Ascii Art 2.0

[gravatar]
The hizzle 9:41 AM on 2 May 2008

Reminiscent of making atascii pages for BBS back in the 80s.

[gravatar]
Jason Litka 9:58 AM on 2 May 2008

That's cool. I've done some ASCII art but that is taking it to a whole new level. I mean, I've got problems doing simple layouts with CSS and still prefer tables...

[gravatar]
brian mintz 10:51 AM on 2 May 2008

u need to go out and get laid broham

[gravatar]
Freak 10:51 AM on 2 May 2008

Woah, impressive! Truly a masterpiece...

[gravatar]
Phunky 11:21 AM on 2 May 2008

Wow, this is great - now we need and CSS-ASCI Art generator and we can all scan and use CSS Images instead :D

[gravatar]
Art Kavanagh 11:32 AM on 2 May 2008

Thank you, thank you! At last somebody's shown me what CSS are for.

@brian minz: And this will certainly make it easier.

[gravatar]
x-stream.de 10:46 AM on 3 May 2008

thats Sick! but genius....never seen ever before...

[gravatar]
Don 2:43 PM on 3 May 2008

My first thought was, THIS should be the result of an ACID test, not that Smiley. Too late :D

[gravatar]
Excalo 5:45 PM on 3 May 2008

Indeed, this is the rebirth of ASCII art. Amazing.

[gravatar]
alanr19 6:35 PM on 3 May 2008

ASCII art R.I.P.

[gravatar]
bignose 10:15 PM on 3 May 2008

So, in order for the standard CSS to render the content properly, a non-free font has to be installed? (Microsofts "core fonts" are not distributed under a free license.) That makes this about as useless as depending on the user having the non-free Flash software in their browser.

So much for standards.

[gravatar]
Anton 11:39 PM on 3 May 2008

man, that's great :)

[gravatar]
shtrlz 4:27 AM on 4 May 2008

я в шоке. вот людям делать нефига...

[gravatar]
Sergey Tugarinov 6:15 AM on 4 May 2008

shtrlz, если человеку нравиться, почему бы собственно не сделать? :)

P.S. Cool animated!

[gravatar]
dizzoid 7:42 AM on 4 May 2008

woshititelno! porazitelno! no podelitis vse je zaboristoy travkoy!

[gravatar]
Paul Walker 9:05 AM on 4 May 2008

@bignose — this was never anything useful to begin with. Furthermore, almost every website references one or more of the MS core fonts. I guess that makes flash OK?

PS: Who ever decided to start calling open-source 'free' with no qualification? Standard usage is that free == available without charge. And there are other, better words to describe the subject (I like the sound of 'liberated' myself

[gravatar]
OxYgEnE 9:19 AM on 4 May 2008

2alanr19: ASCII art - forever!

[gravatar]
jonathan 1:14 PM on 4 May 2008

now do lisa!

[gravatar]
Jamie Le Souef 10:57 PM on 4 May 2008

Holy Crap! That's amazing

[gravatar]
Byron 11:07 PM on 4 May 2008

Nice! too bad doesn't render properly on Ubuntu 8.04 fx3b5 :(

[gravatar]
Sigg3 7:36 AM on 6 May 2008

DOH!

[gravatar]
nordee 8:39 AM on 6 May 2008

This might be a great way to make CAPTCHAs. The client would see it as random strings of text/CSS descriptors, but any human viewer could describe the picture from a list of possible tags very easily.

[gravatar]
David Bongard - CSS & Webdesign 8:47 AM on 6 May 2008

Nice work! You can even see Homer's skull when you select him with the mouse. ;-)

[gravatar]
logicerror 11:49 AM on 6 May 2008

That's awesome, nice work :)

[gravatar]
Stephan 7:17 PM on 6 May 2008

why?

[gravatar]
nashruddin 12:14 PM on 7 May 2008

that's pretty cool. but wouldn't it be easier to just use photoshop or gimp? :)

[gravatar]
michaelbhand 3:25 PM on 7 May 2008

I noticed that the image of Homer scales uniformly when the default font size is scaled using Ctrl+mouse wheel. The image breaks down a little at the lower font sizes. Absolute positioning is absolutely awesome.

[gravatar]
nath 8:07 AM on 8 May 2008

Too bad this doesn't work without non-free fonts. What good are standards for if people use them in a way limiting usefulness to specific systems?

[gravatar]
Tom Van Looy 10:29 AM on 8 May 2008

"works with", "works with" ...
The real question is, "does it pass the validator.w3.org test?"

[gravatar]
Nick 12:06 PM on 8 May 2008

I love Homer and everything Simpsons. I love how creative this is, but honestly where do people find the time to do this sort of thing? Not to dissuade people though, keep it up!

- The Peanut Butter Boy

[gravatar]
Too Cool 1:17 PM on 9 May 2008

Kickin' ASCII!

[gravatar]
Binay Ligal 9:50 PM on 9 May 2008

Amazing. Simply Amazing.

[gravatar]
John Ballslap 11:27 AM on 10 May 2008

Tom Van Looy 10:29 AM on 8 May 2008
"works with", "works with" ...
The real question is, "does it pass the validator.w3.org test?"

Sure it does!

This document validates as CSS level 2.1 !

Fantastic work!

[gravatar]
ameo 11:09 PM on 11 May 2008

didn't knew that css can do such things ,,

it's on my list to learn now ,,

good work

[gravatar]
Rafael Rinaldi 8:59 PM on 12 May 2008

wtf?

[gravatar]
Iljitsch 4:10 PM on 14 May 2008

Oh man how did you do this? that's awesome... I'd love to see Maggie or the Cat as ASCII ;)

[gravatar]
ilia boyko 9:35 AM on 16 May 2008

This is freaking cool but so time consuming!

[gravatar]
andrew 10:39 PM on 19 May 2008

Just one word... WOW! That is truly amazing.

[gravatar]
Ricardo Lopes 5:48 PM on 22 May 2008

Hello, just to say congratulations, it's a very unique work, as well as a very unique talent.

[gravatar]
lydia 4:08 PM on 23 May 2008

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
(
- + CSS = HOMER !!
Fantastic !!!!!!!

[gravatar]
Nico 4:30 AM on 25 May 2008

Doh !
This is fantastic ! :)

[gravatar]
Ian Robertson 12:33 PM on 4 Jun 2008

My browser is going to explode!

[gravatar]
Rezary 2:26 PM on 4 Jun 2008

Amazing work, though the neck seems a bit too long. Still, absolutely amazing!

[gravatar]
Blender 2:29 PM on 4 Jun 2008

great... very very cool think... love css hoomer

Michael from 3DundFilm.de

[gravatar]
Tomas Jonuška 2:50 AM on 9 Jun 2008

I like it :) nice job.

[gravatar]
Jon Milani 8:40 PM on 9 Jun 2008

Wow... this really takes CSS to the next level! Very impressive! I can only imagine how this might be taken to the next level.

Comments are closed.