![[*]](/dodeca3_100.gif)
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.
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.
Comments
I can only imagine how long that must have taken to put together.
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!
ned, you rock !
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!
Ned == 'awesome'
That's pretty hilarious.
I love these types of projects. Really creative and neat trick!
Brings new meaning to the term "ASCII Art." :)
Bloody Hell! [ that's Mancunian for 'well impressed']
I'll spend the holidays deconstructing the css
holy crap.
that's completely ridiculous.
And people say *I* have too much time on my hands!
Still, I'd liked watching to see the letters used.
Ho.ly.Cats.
OutSTANDING!
jQuery Rocks...
...and it was done in "ems"?!?!? This man is my hero!
Shut up, Flanders!
impressive! It's really the new css art !
can I get some absolute positioning?!
Dude... you must have more spare time than me. I am now envious.
Cool!
incredible, román and ned!
Incredible.... good work buddy!
O||\\||\\\\((8ooo((8oooo))boOoooooo)boOooooooooo///•••••___•••CCO(
Brilliant, it's like the rebirth of ASCII art.
Sebastian
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
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.
Wow... does anyone know much time it took him to make this?
make it cross platform. THEN you'll be my hero! ;)
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.
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.
slimpo you are a moron.
Hi diddly ho, Ned! That's great. And hats off to you, Roman.
stupid flanders... xD
woah! - damn that be an awesome trick!
I think someone has a little bit too much time on their hands, but time well spent.
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!
wow! thats is unbelieveable! well done! have just passed this onto all my css mates
You must have mild Autism to have the patience to do something like this.
That totally made my morning. Thanks!
Did a sudo apt-get install msttcorefonts, restarted Firefox, and everything looks good.
holy crap thats awesome
I want to know how you did it. Amazing.
Amazing! Can you do a caricature of Ken Livingstone
Wonder if it looks like crap in ie6 ?
Wow! it even scales up in font size smoothly
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
Reminiscent of making atascii pages for BBS back in the 80s.
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...
u need to go out and get laid broham
Woah, impressive! Truly a masterpiece...
Wow, this is great - now we need and CSS-ASCI Art generator and we can all scan and use CSS Images instead :D
Thank you, thank you! At last somebody's shown me what CSS are for.
@brian minz: And this will certainly make it easier.
thats Sick! but genius....never seen ever before...
My first thought was, THIS should be the result of an ACID test, not that Smiley. Too late :D
Indeed, this is the rebirth of ASCII art. Amazing.
ASCII art R.I.P.
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.
man, that's great :)
я в шоке. вот людям делать нефига...
shtrlz, если человеку нравиться, почему бы собственно не сделать? :)
P.S. Cool animated!
woshititelno! porazitelno! no podelitis vse je zaboristoy travkoy!
@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
2alanr19: ASCII art - forever!
now do lisa!
Holy Crap! That's amazing
Nice! too bad doesn't render properly on Ubuntu 8.04 fx3b5 :(
DOH!
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.
Nice work! You can even see Homer's skull when you select him with the mouse. ;-)
That's awesome, nice work :)
why?
that's pretty cool. but wouldn't it be easier to just use photoshop or gimp? :)
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.
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?
"works with", "works with" ...
The real question is, "does it pass the validator.w3.org test?"
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
Kickin' ASCII!
Amazing. Simply Amazing.
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!
didn't knew that css can do such things ,,
it's on my list to learn now ,,
good work
wtf?
Oh man how did you do this? that's awesome... I'd love to see Maggie or the Cat as ASCII ;)
This is freaking cool but so time consuming!
Just one word... WOW! That is truly amazing.
Hello, just to say congratulations, it's a very unique work, as well as a very unique talent.
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 !!!!!!!
Doh !
This is fantastic ! :)
My browser is going to explode!
Amazing work, though the neck seems a bit too long. Still, absolutely amazing!
great... very very cool think... love css hoomer
Michael from 3DundFilm.de
I like it :) nice job.
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.