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.

»  89 reactions

Comments

[gravatar]
I can only imagine how long that must have taken to put together.
[gravatar]
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]
ned, you rock !
[gravatar]
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]
That's pretty hilarious.
[gravatar]
I love these types of projects. Really creative and neat trick!
[gravatar]
Brings new meaning to the term "ASCII Art." :)
[gravatar]
Bloody Hell! [ that's Mancunian for 'well impressed']

I'll spend the holidays deconstructing the css
[gravatar]
holy crap.

that's completely ridiculous.
[gravatar]
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]
jQuery Rocks...
[gravatar]
...and it was done in "ems"?!?!? This man is my hero!
[gravatar]
Shut up, Flanders!
[gravatar]
impressive! It's really the new css art !
[gravatar]
can I get some absolute positioning?!
[gravatar]
Dude... you must have more spare time than me. I am now envious.

Cool!
[gravatar]
incredible, román and ned!
[gravatar]
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]
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]
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]
Wow... does anyone know much time it took him to make this?
[gravatar]
make it cross platform. THEN you'll be my hero! ;)
[gravatar]
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]
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]
slimpo you are a moron.
[gravatar]
Hi diddly ho, Ned! That's great. And hats off to you, Roman.
[gravatar]
stupid flanders... xD
[gravatar]
woah! - damn that be an awesome trick!
[gravatar]
I think someone has a little bit too much time on their hands, but time well spent.
[gravatar]
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]
wow! thats is unbelieveable! well done! have just passed this onto all my css mates
[gravatar]
You must have mild Autism to have the patience to do something like this.
[gravatar]
That totally made my morning. Thanks!
[gravatar]
Did a sudo apt-get install msttcorefonts, restarted Firefox, and everything looks good.
[gravatar]
holy crap thats awesome
[gravatar]
I want to know how you did it. Amazing.
[gravatar]
Amazing! Can you do a caricature of Ken Livingstone
[gravatar]
Wonder if it looks like crap in ie6 ?
[gravatar]
Wow! it even scales up in font size smoothly
[gravatar]
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]
Reminiscent of making atascii pages for BBS back in the 80s.
[gravatar]
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]
u need to go out and get laid broham
[gravatar]
Woah, impressive! Truly a masterpiece...
[gravatar]
Wow, this is great - now we need and CSS-ASCI Art generator and we can all scan and use CSS Images instead :D
[gravatar]
Thank you, thank you! At last somebody's shown me what CSS are for.

@brian minz: And this will certainly make it easier.
[gravatar]
thats Sick! but genius....never seen ever before...
[gravatar]
My first thought was, THIS should be the result of an ACID test, not that Smiley. Too late :D
[gravatar]
Indeed, this is the rebirth of ASCII art. Amazing.
[gravatar]
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]
man, that's great :)
[gravatar]
я в шоке. вот людям делать нефига...
[gravatar]
shtrlz, если человеку нравиться, почему бы собственно не сделать? :)

P.S. Cool animated!
[gravatar]
woshititelno! porazitelno! no podelitis vse je zaboristoy travkoy!
[gravatar]
@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]
2alanr19: ASCII art - forever!
[gravatar]
Holy Crap! That's amazing
[gravatar]
Nice! too bad doesn't render properly on Ubuntu 8.04 fx3b5 :(
[gravatar]
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]
Nice work! You can even see Homer's skull when you select him with the mouse. ;-)
[gravatar]
That's awesome, nice work :)
[gravatar]
that's pretty cool. but wouldn't it be easier to just use photoshop or gimp? :)
[gravatar]
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]
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]
"works with", "works with" ...
The real question is, "does it pass the validator.w3.org test?"
[gravatar]
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]
Kickin' ASCII!
[gravatar]
Amazing. Simply Amazing.
[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?"

Sure it does!

This document validates as CSS level 2.1 !

Fantastic work!
[gravatar]
didn't knew that css can do such things ,,

it's on my list to learn now ,,

good work
[gravatar]
Oh man how did you do this? that's awesome... I'd love to see Maggie or the Cat as ASCII ;)
[gravatar]
This is freaking cool but so time consuming!
[gravatar]
Just one word... WOW! That is truly amazing.
[gravatar]
Hello, just to say congratulations, it's a very unique work, as well as a very unique talent.
[gravatar]
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]
Doh !
This is fantastic ! :)
[gravatar]
My browser is going to explode!
[gravatar]
Amazing work, though the neck seems a bit too long. Still, absolutely amazing!
[gravatar]
great... very very cool think... love css hoomer

Michael from 3DundFilm.de
[gravatar]
Wow... this really takes CSS to the next level! Very impressive! I can only imagine how this might be taken to the next level.

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:
Comment text is Markdown.