CSS Homer, animated

Thursday 1 May 2008

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: css» 89 reactions

Comments

spacer
Al 9:39 AM on 1 May 2008

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

spacer
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!

spacer
mike bayer 11:41 AM on 1 May 2008

ned, you rock !

spacer
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!

spacer
Noah Kantrowitz 1:05 PM on 1 May 2008

Ned == 'awesome'

spacer
Aaron 4:13 PM on 1 May 2008

That's pretty hilarious.

spacer
Chris Papadopoulos 4:14 PM on 1 May 2008

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

spacer
Bob 4:20 PM on 1 May 2008

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

spacer
keithpeter 4:36 PM on 1 May 2008

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

I'll spend the holidays deconstructing the css

spacer
JEff 4:48 PM on 1 May 2008

holy crap.

that's completely ridiculous.

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

spacer
Michael Campbell 5:12 PM on 1 May 2008

Ho.ly.Cats.

OutSTANDING!

spacer
Faraz 5:16 PM on 1 May 2008

jQuery Rocks...

spacer
Nathan 5:27 PM on 1 May 2008

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

spacer
russdogg 6:22 PM on 1 May 2008

Shut up, Flanders!

spacer
zyo 6:36 PM on 1 May 2008

impressive! It's really the new css art !

spacer
James Carlos 6:41 PM on 1 May 2008

can I get some absolute positioning?!

spacer
Travis Bell 6:56 PM on 1 May 2008

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

Cool!

spacer
tevan 7:03 PM on 1 May 2008

incredible, román and ned!

spacer
Sujay 7:07 PM on 1 May 2008

Incredible.... good work buddy!

spacer
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

spacer
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

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

spacer
Sam Stigler 1:07 AM on 2 May 2008

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

spacer
pb 1:44 AM on 2 May 2008

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

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

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

spacer
Sebhelyesfarku 4:24 AM on 2 May 2008

slimpo you are a moron.

spacer
jimothy 6:47 AM on 2 May 2008

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

spacer
r 7:32 AM on 2 May 2008

stupid flanders... xD

spacer
Colin Nash 7:33 AM on 2 May 2008

woah! - damn that be an awesome trick!

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

spacer
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!

spacer
danbhala 8:14 AM on 2 May 2008

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

spacer
Samo 8:22 AM on 2 May 2008

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

spacer
Spamboy 8:31 AM on 2 May 2008

That totally made my morning. Thanks!

spacer
Andrew 8:33 AM on 2 May 2008

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

spacer
seawolf167 8:58 AM on 2 May 2008

holy crap thats awesome

spacer
nepspeed82 9:03 AM on 2 May 2008

I want to know how you did it. Amazing.

spacer
johnny cash 9:04 AM on 2 May 2008

Amazing! Can you do a caricature of Ken Livingstone

spacer
Matthew Wallace 9:25 AM on 2 May 2008

Wonder if it looks like crap in ie6 ?

spacer
Charlie 9:27 AM on 2 May 2008

Wow! it even scales up in font size smoothly

spacer
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

spacer
The hizzle 9:41 AM on 2 May 2008

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

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

spacer
brian mintz 10:51 AM on 2 May 2008

u need to go out and get laid broham

spacer
Freak 10:51 AM on 2 May 2008

Woah, impressive! Truly a masterpiece...

spacer
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

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

spacer
x-stream.de 10:46 AM on 3 May 2008

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

spacer
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

Related searches:
awesome amazing thought really jquery
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.