Simpsons in CSS | Hacker News Reader

Simpsons in CSS

pattle.github.io

238 pointspattle78 comments

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.

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

Does this include him respecting copyrights?

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

I'm glad someone shares my opinion on this. Drawing with CSS is like moving to a new place using a cartwheel instead of a truck.

It's not the best tool for the job, but it's still a hack. Lighten up. Should all CSS demos come with this disclaimer now?

  Why is this #1 on HN right now?

Because it neatly demonstrates the power of these CSS tools, and by exploring how these complex images were created we can see more easily how to apply the same techniques to more commonplace elements.

It's #1 on HN because people voted on it, now stop being a whiny ass and just move to the next one if you don't like it.

Because this is clearly a hack and the name of this site is Hacker News.

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.

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.

This guy built something that resonates with this community. He did a fantastic job.

You have done a service with your comment by pointing out that these are the wrong tools to implement it. I agree!

But I personally feel we don't get enough posts on this site showing things that people have built themselves. So regardless of how I feel about what someone built, if someone posts their work for praise or ridicule I applaud them.

I believe this was a creative use of css, and looks fantastic.

Just as every something-that-was-possible-twenty-years-ago-now-in-javascript-just-slower hits #1 on HN...

Because you study and read the CSS source and become better at CSS. That is exactly what I did.

I fail to see why this is such a bad solution, assuming one had a tool with an Adobe Illustrator alike interface yet it generated CSS code instead of SVG files. Maybe I am missing something fundamental, but as I see it, they both have pros and cons.

Clarification: I do not think he used such a tool. My point is that you are way to quick to take a dump on this technique. Just give me an efficient way of doing it, and it might not be such a bad idea after all.

Your argument is roughly the same as saying that once photography was invented, painting should have stopped as a form of art.

No. It's like saying that after we started building skyscrapers with steel, we should have stopped using wood.

It's a personal exercise in creativity and problem-solving. Much closer to art than to a construction project where thousands of lives and millions of dollars are at stake.

The Simpsons in CSS isn't development advice, it's a piece of art that you can learn some advanced CSS features from. Click on "How I did it" at the bottom.

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

It IS! Very very cool :)

Vertical alignment is a real pain; flexbox offers a nice solution: http://jsfiddle.net/Pr22b/

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

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

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

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!

From a practical perspective, SVG would be easier to create, while being just as small and fast. This seems to be just a demo of the capability of CSS.

Decreased download size compared to what?

Compared to the bitmap I referred to (i.e. an image file). As hrjet points out above, using SVG for this would probably be a better choice.

I'm sure a png would do nicely on these mostly flat images.

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

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 :)

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.

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.

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

Beautiful, and the CSS itself is beautifully organized.

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

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.

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.

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 { ... }

The calls to JavaScript functions that are ID-based would certainly not work. But there are many ways to access them that wouldn't.

In regard to the selector type, does Homer have more than one left eye? More than likely not, but that's why I suggested using all class selectors as an option. Using all class selectors would enable you to produce (a) as many Homers as you'd like and (b) as many left eyes, right eyes, mouths, etc as you'd like.

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

You shouldn't use ID's for any of them. ID's are anchors and should really be reserved for page layout.

Mixing classes and IDs in CSS selectors causes headaches at scale because IDs change the order of precedence. These days I just avoid using them in CSS altogether.

Any articles on this? I've been coding CSS for quite awhile and I didn't know about any of this.

http://css-tricks.com/specifics-on-css-specificity/

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

Why would anyone do that?

We make a drawing app called WebCode (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 :-)

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

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

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.

And here's one in Html tables: http://pastebin.com/XAUpNZ44

So what?

For the lazy: http://jsbin.com/iXIrIlur/1

I consider this CSS technique to be a decent advance over single pixel HTML tables.

Very impressive but where's Lisa?

Was she harder than the rest to get right?

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

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

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.

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

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

Yes, things were definitely different 17 years ago.

You're right. I know that CSS needs to be applied to a document; without a document there's nothing to be styled.

Still, to me saying that something is in "pure" CSS would imply that the HTML is not more complicated than e.g.:

  <div id=homer></div>

(I guess that making a drawing such as the ones in the OP using only one div would not be possible until browsers accept pseudo-elements to be defined on top of other pseudo-elements.)

I understand that by "pure" the author meant "without using images". But IMHO using dozens of empty div elements isn't "pure" CSS.

I see what you mean. Saying CSS/HTML would be a more precise way of describing this.

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

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

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

This is very cool. Great Work!

Thank you

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

Can't you use the new Google thing for animations to do lots of this? https://www.google.com/webdesigner/

Here: http://www.chrispattle.com/blog/simpsons-in-css/

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

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

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

Amazing. How many hours of work?

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.

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

wow haha impressive

okely dokely

Reply on news.ycombinator.com