

Simpsons in CSS - pattle
http://pattle.github.io/simpsons-in-css/

======
krmmalik
Full Disclosure: He didn't ask me to do this, and I hope he doesn't mind.

This guy's been working on a freelance project for a Start-Up for me for the
last few months as an all round front-end, back-end and UI/UX guy. Nothing but
professionalism and great delivery all the way through. What i've loved about
him most has been the fact that he's a great self-starter and has brought so
many useful ideas to the table. Exactly what a Start-Up needs.

Also had the chance to meet him and his wife for Coffee a few weekends ago.
Really nice guy.

If there are any Start-Ups here that are looking for a coder that has a very
good sense of UI/UX, you should hire him. (my project is almost finished, so
he'll be free soon).

I'm willing to personally vouch for his work ethic, credibility and talent.

Oh and all the work he did for me has been done remotely through BitBucket,
email and Skype. I was very comfortable throughout in leaving him to his own
devices.

He is the epitome of what it means to have a remote worker, so if you're a
Start-Up outside of the UK thinking you can't hand him work because he's
remote, think again.

 __Edit: __Remote notes.

~~~
aDevilInMe
I'm willing to personally vouch for his work ethic, credibility and talent.

Does this include him respecting copyrights?

------
jstsch
No, stop it. Why is this #1 on HN right now? Just use SVG. This was fun as a
demo a couple of years ago, but don't use this technique in production
folks...

~~~
lignuist
Why is this the top comment of the thread? Just use flag. This was a fun
comment a couple of years ago, but don't use this in discussions over and
over.

~~~
code_duck
Flag? That's not the appropriate action when one disagrees with the use of a
technology described in an article. Flagging is for inappropriate content or
spam. Voting down would be, if that was an option on HN.

------
Artemis2
I can't even center text vertically in CSS... This is beautiful !

~~~
jlas
Vertical alignment is a real pain; flexbox offers a nice solution:
[http://jsfiddle.net/Pr22b/](http://jsfiddle.net/Pr22b/)

(Disclaimer: flexbox is still 'bleeding edge'
[https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Flexi...](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Flexible_boxes))

------
topherjaynes
So who's going to tackle the opening sequence of the Simpson's with pure CSS
animations?

~~~
rfnslyr
I'm like 98% compelled to quit my job just to see this come to fruition.

------
andyroid
Wow, this has to be the most awesome "X in CSS" demos I've seen! As for
performance, I can definitely see the decreased download size as beneficial,
but what about rendering speed? All those elements and transforms must surely
be heavier to render than a simple bitmap? I will definitely check back to see
if/when more characters are added!

~~~
jlas
More awesome than the Mona Lisa in CSS?
([https://news.ycombinator.com/item?id=4610243](https://news.ycombinator.com/item?id=4610243))

~~~
andyroid
Wow, thanks for sharing! I hadn't seen that before. But, yeah, hand crafted
Simpsons characters are more slightly more awesome than code generated css
images. And both pretty insane as well :)

------
schnable
The claim on the blog is that this provide "obviously better performance" than
an image, but is that true? Seems like browser could render an image faster
that lots of CSS transforms.

------
dpcan
There are already many tools that convert any image to pure CSS if you are
interested in doing this. As well as using base64 in the img source, and
javascript+canvas.

I suppose the value in doing this is that maybe an image could go right into
an email to someone, or if you are hosting a page on the web somewhere that
doesn't have the ability to upload images - but you still want to display one
- just use CSS.

Otherwise - I'm not sure what this post is telling us. Did he do them by hand?
Did he just convert some images using freely available tools? I'm not sure the
value here other than to show people that there are other ways to display
images in browsers than loading and showing the images themselves.

~~~
zevyoura
Check out the DOM structure of the character heads, these were almost
certainly done by hand.

------
booop
Beautiful, and the CSS itself is beautifully organized.

~~~
nudetayne
Not really, the CSS might be organized, but overall it's pretty terrible.
Classes are for multiple instances and IDs are for unique instances.

~~~
pattle
I decided to use classes rather than id's because I knew my project page would
have multiple characters on it. So I didn't want to have multiple elements
with an id of "left-eye" or "nose" etc. But I guess I could have prefixed
everything with the characters name and used ID's instead.

~~~
nudetayne
From what I see in the CSS files, you already prefixed (edit: by prefixed, I
mean child selectors) everything with the character's name, which is where my
confusion comes from. Either everything should use class selectors, or
characters should use a class selector and the constituent body parts should
be ID selectors.

~~~
sbarre
but then wouldn't document.getElementById() calls get confused, even though
your IDs are nested?

Shouldn't it be the other way around?

    
    
        #homer .left-eye { ... }
        #bart .left-eye { ... }
    

makes more sense to me than

    
    
        .homer #left-eye { ... }
        .bart #left-eye { ... }

~~~
rimantas

      .homer #left-eye
    

This indeed makes (almost) no sense. It makes no sense for sure if you intend
to have several characters on the page — id must be unique, and it does not
matter that something is in front of it.

.some-class #some-id makes sense only if you want to style page-unique
elements differently in some cases but even in that case I'd argue that #some-
page-id #some-id would be better (assuming #some-page-id is the body element
id).

------
fest
I'm wondering, how hard could it be to write a tool which converts (at least a
basic subset of) SVG to CSS.

~~~
PixelCut
We make a drawing app called WebCode
([http://www.webcodeapp.com/](http://www.webcodeapp.com/)) which can import
SVG and PSD files and export CSS+HTML or JavaScript+Canvas code. Of course,
converting SVG files to CSS is not something you'd generally use it for, but
it can be done :-)

------
apierre
"Everything done in CSS" fad makes me think this is the new ASCII art

------
dajo
When viewed in IE8 or lower, it looks like the animation from season 1!

------
Segmentation
By the title, I was hoping this was the Simpsons opening done entirely in CSS
using animations. I bet it's possible, but would require insane effort.

Still awesome though.

------
gokhan
And here's one in Html tables:
[http://pastebin.com/XAUpNZ44](http://pastebin.com/XAUpNZ44)

So what?

~~~
jonahx
For the lazy: [http://jsbin.com/iXIrIlur/1](http://jsbin.com/iXIrIlur/1)

------
avalaunch
Very impressive but where's Lisa?

Was she harder than the rest to get right?

------
mayankkp
Awesome! Made me laugh just looking at the characters. Good work!

------
linssen
[http://en.wikipedia.org/wiki/Scalable_Vector_Graphics](http://en.wikipedia.org/wiki/Scalable_Vector_Graphics)

------
mrtbld
While I appreciate the effort, claiming that is it "pure CSS" is not true. The
page is made out of 235 divs, and divs are not CSS but HTML.

~~~
code_duck
There is no CSS without HTML. And, there is no HTML without CSS as browsers
contain built in style sheets.

~~~
boomlinde

        > there is no HTML without CSS
    
        * HTML 2.0: 1995 
        * CSS 1: 1996
    

That must have been a hard year for HTML 2.0, not to mention half a decade for
HTML altogether.

~~~
code_duck
Yes, things were definitely different 17 years ago.

------
elefont2
This is pretty cool. It makes we wonder if it would be possible to create an
automatic SVG-to-CSS converter

------
j2oomee
Interesting that Homer's line count is less than the rest. Homers simplicity
is even reflected in CSS!

------
shmerl
I think SVG makes more sense for this. CSS is not intended to be vector
graphics format.

------
maddisc2
This is very cool. Great Work!

~~~
pattle
Thank you

------
arpstick
It'd be cool if there was a tool to assist in the creation of such arts.

~~~
newsmaster
Here: [http://www.chrispattle.com/blog/simpsons-in-
css/](http://www.chrispattle.com/blog/simpsons-in-css/)

Now you're 1 step closer to figuring out how to build this tool :)

------
exo_duz
Great Work! Looks real good. Hope he plans to do more :)

~~~
pattle
Thank you. Yes I plan to do some more. Apu is nearly done and I'll add a few
more characters after that.

------
patatino
Amazing. How many hours of work?

~~~
pattle
Thanks. I'd say each character took me around 2-3 hours. After doing a couple
you can begin to re-use eyes and noses etc.

------
jennibear
where is the link?? I can't see anything

------
kevonc
wow haha impressive

------
timjensen
okely dokely

