Simpsons in CSS

[lsv1]

I've been out of the webdev game for perhaps a decade. The most recent things I've done are @Media queries.

Finding this inspires me to learn about what else I could create in css - also it has really funky behavior in IE8~ and if you zoom in:)

Note - this isn't mine, it was found on r/programming.

[paulrouget]

I can do better: http://paulrouget.com/e/simpsons/ :)

[codemaster3000]

Hah good one :D

[JosephRedfern]

He runs through how he did it here: http://www.chrispattle.com/blog/simpsons-in-css/

[alex_doom]

Nice demo, but SVG exists for a reason.

[oneeyedpigeon]

I wanted to post this myself, but feared the wrath of the downvoters - it might come across as a bit negative. However, I think the positives should be highlighted: SVG is really, really ideal for these kinds of graphics, and we should be trying to push the technology and be equally impressed with its results.

[poopsintub]

Not to mention time saving. Can you imagine how long it took him to make that in CSS? I bet it's fun to practice doing this kind of stuff?

[grahamel]

Also, if you really want to tick the "in CSS" box you could add them as Data URIs

[remon]

That is taking the "wrong tool for the job" thing to such spectacular heights that I can't help but admire it.

[FranOntanaya]

CSS has gone too far. We are playing God here.

[apierre]

This is the new ascii art

[oneeyedpigeon]

More like the new Acid [1] test.

[1] http://www.webstandards.org/files/acid2/test.html#top

[JohnTHaller]

IE7/8: http://imgur.com/dG45PK5 (posted by Uberhipster)

IE6: http://i.imgur.com/7qYY9Ie (posted by me)

From: r/programming: http://www.reddit.com/r/programming/comments/28ya9x/simpsons...

[lsv1]

Looks like gooby pls

[restlessmedia]

It is a re-post but who cares. I'm very impressed with the results, it's very easy to spot when something's not quite right with a character draw (eyes too big/small, mouth slightly too wide etc) but I can imagine getting this close to the 'real' thing wasn't easy.

[toxican]

Is it just me or does everyone between Flanders and Apu look a little messed up? In Firefox

[probably_wrong]

In my case, in Firefox they look slightly messed up, while in Safari they are getting closer to ugly: http://imgur.com/XzW1uJG

But then again, when it comes to CSS I've come to always expect that kind of bugs.

[peaton]

Comic Book Guy looks pretty screwed up on Safari. What browser/os was this guy targeting?

[JasonFruit]

Apparently Chrome. It's perfect for me.

[danso]

This has been posted before (8 months ago): https://news.ycombinator.com/item?id=6710863

But according to the git-commit log, in the last two weeks, he's added the blinking (the code for which is pretty cool)...and since the last submission, he's added Apu, Comic Book Guy, and Ralph Wiggum...so that definitely deserves a resubmit.

Given that the blinking was the first difference I noticed...I would love to see Blinky, the 3-eyed fish

on a side note...I remember cloning the repo as soon as I saw it on HN, just because I thought for sure it would attract a takedown notice. Hope I didn't just jinx it...

[gus_massa]

I remember a previous example of Homer in CSS by another author. It draws only Homer, and it was submitted 6 years ago: https://news.ycombinator.com/item?id=176360 (23 points, 2247 days ago, 6 comments)

[thegeomaster]

Do they really send takedown notices to projects like this one?

[danso]

You know what? I don't really know...and after doing some quick reflection, I think that knee-jerk assumption was based off of something I remember reading from the Simpsons Archive...which is probably the very first website I ever remember reading on a regular basis. From their About Page:

http://www.snpp.com/about.html

> The Simpsons Archive cannot accept sound or movie file submissions under any conditions. Our server traffic averages 24 gigabytes per month, and housing a large binary archive would boost bandwidth fees beyond affordable limits. Additionally, Twentieth Century Fox ruthlessly defends its copyrighted work by issuing Cease & Desist orders to fan sites housing said content. While we sympathize with those who have fallen victim to Fox, we prefer to avoid legal entanglements by steering clear of multimedia.

Otherwise, The Simpsons Archive gladly accepts all submissions in the form of fan-authored FAQs, lists, guides, news and other miscellaneous items. All authors retain full credit for their works and may update them within The Simpsons Archive as needed. We ask, however, that prospective maintainers be versed in basic HTML. For further details, please e-mail [e-mail] for our submission policies.

So Fox's aggressive C&D is maybe just for audio/video? The SNPP does have a very small sprinkling of Simpsons-artwork. And maybe Fox was more aggressive with C&D back in the day, like, 15-20 years ago, when SNPP was first starting out.

[billrobertson42]

One might assume that audio/video is ripped from the original, and is therefore copyrighted by Fox.

I don't think that putting up your own rendering of a character is quite the same thing.

[mgkimsal]

use ctrl+ a few times to make everything larger - the eyelids start to close. Not sure how intentional that was, but it's sort of cool - gives the characters a completely different feel.

[janjongboom]

I'm pretty sure it's an animation that is there intentionally.

[mgkimsal]

The eyelid animation is intentional, yes, but I'm not sure the partially closed eyes when the char size is increased was intentional.

[pyrrhotech]

this is truly amazing. How long did it take?

[jjmiv]

cooooooool!

[fifthesteight]

*human bart == white bart.

(edit: caucasian)

[ponytech]

Isn't it a repost ? I've seen it here before