Simpsons in CSS

151 points by lsv1 11 years ago | 30 comments

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 11 years ago |

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

codemaster3000 11 years ago | |

Hah good one :D

JosephRedfern 11 years ago |

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

alex_doom 11 years ago |

Nice demo, but SVG exists for a reason.

oneeyedpigeon 11 years ago | |

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 11 years ago | | |

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 11 years ago | |

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

remon 11 years ago |

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

FranOntanaya 11 years ago |

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

apierre 11 years ago |

This is the new ascii art

oneeyedpigeon 11 years ago | |

More like the new Acid [1] test.

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

JohnTHaller 11 years ago |

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 11 years ago | |

Looks like gooby pls

restlessmedia 11 years ago |

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 11 years ago |

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

probably_wrong 11 years ago | |

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 11 years ago | |

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

JasonFruit 11 years ago | | |

Apparently Chrome. It's perfect for me.

danso 11 years ago |

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 11 years ago | |

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 11 years ago | |

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

danso 11 years ago | | |

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 webmaster@snpp.com 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.

mgkimsal 11 years ago |

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 11 years ago | |

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

mgkimsal 11 years ago | | |

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

pyrrhotech 11 years ago |

this is truly amazing. How long did it take?

jjmiv 11 years ago |

cooooooool!

fifthesteight 11 years ago |

*human bart == white bart.

(edit: caucasian)

ponytech 11 years ago |

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