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

[Sakes]

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.

[marrs]

  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.

[Killswitch]

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.

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

[adam12]

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

[johnpmayer]

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?

[sutterbomb]

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

[iconjack]

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.

[a1a]

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.

[poxrud]

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

[rplnt]

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

[mdigi]

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.

[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/

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

[jcklnruns]

It IS! Very very cool :)

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

[hrjet]

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.

[jlas]

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

[garethadams]

Decreased download size compared to what?

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

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

[hk__2]

Why would anyone do that?

[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

So what?

[jonahx]

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

[code_duck]

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

[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

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

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