5 ms·

Simpsons in CSS

151 points by lsv1 12y ago

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.

jjmiv 12y ago
cooooooool!
JosephRedfern 12y ago
He runs through how he did it here: http://www.chrispattle.com/blog/simpsons-in-css/ http://www.chrispattle.com/blog/simpsons-in-css/
ponytech 12y ago
Isn't it a repost ? I've seen it here before
fifthesteight 12y ago
*human bart == white bart. (edit: caucasian)
danso 12y ago
This has been posted before (8 months ago): https://news.ycombinator.com/item?id=6710863 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 12y 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 https://news.ycombinator.com/item?id=176360 (23 points, 2247 days ago, 6 comments)
- thegeomaster 12y ago
  Do they really send takedown notices to projects like this one?
  - danso 12y 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 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.
    - billrobertson42 12y ago
      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.
FranOntanaya 12y ago
CSS has gone too far. We are playing God here.
mgkimsal 12y 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 12y ago
  I'm pretty sure it's an animation that is there intentionally.
  - mgkimsal 12y ago
    The eyelid animation is intentional, yes, but I'm not sure the partially closed eyes when the char size is increased was intentional.
restlessmedia 12y 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.
paulrouget 12y ago
I can do better: http://paulrouget.com/e/simpsons/ http://paulrouget.com/e/simpsons/ :)
- codemaster3000 12y ago
  Hah good one :D
toxican 12y ago
Is it just me or does everyone between Flanders and Apu look a little messed up? In Firefox
- peaton 12y ago
  Comic Book Guy looks pretty screwed up on Safari. What browser/os was this guy targeting?
  - JasonFruit 12y ago
    Apparently Chrome. It's perfect for me.
- probably_wrong 12y ago
  In my case, in Firefox they look slightly messed up, while in Safari they are getting closer to ugly: http://imgur.com/XzW1uJG http://imgur.com/XzW1uJG But then again, when it comes to CSS I've come to always expect that kind of bugs.
alex_doom 12y ago
Nice demo, but SVG exists for a reason.
- oneeyedpigeon 12y 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 12y 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 12y ago
  Also, if you really want to tick the "in CSS" box you could add them as Data URIs
apierre 12y ago
This is the new ascii art
- oneeyedpigeon 12y ago
  More like the new Acid [1] test. [1] http://www.webstandards.org/files/acid2/test.html#top http://www.webstandards.org/files/acid2/test.html#top
pyrrhotech 12y ago
this is truly amazing. How long did it take?
remon 12y ago
That is taking the "wrong tool for the job" thing to such spectacular heights that I can't help but admire it.
JohnTHaller 12y ago
IE7/8: http://imgur.com/dG45PK5 http://imgur.com/dG45PK5 (posted by Uberhipster) IE6: http://i.imgur.com/7qYY9Ie http://i.imgur.com/7qYY9Ie (posted by me) From: r/programming: http://www.reddit.com/r/programming/comments/28ya9x/simpsons_in_css/ http://www.reddit.com/r/programming/comments/28ya9x/simpsons...
- lsv1 12y ago
  Looks like gooby pls

Simpsons in CSS

151 points by lsv1 12y ago

jjmiv 12y ago

cooooooool!

JosephRedfern 12y ago

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

ponytech 12y ago

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

fifthesteight 12y ago

*human bart == white bart. (edit: caucasian)

danso 12y ago

This has been posted before (8 months ago): https://news.ycombinator.com/item?id=6710863 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 12y 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 https://news.ycombinator.com/item?id=176360 (23 points, 2247 days ago, 6 comments)
thegeomaster 12y ago
Do they really send takedown notices to projects like this one?
- danso 12y 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 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.
  - billrobertson42 12y ago
    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.

FranOntanaya 12y ago

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

mgkimsal 12y 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 12y ago
I'm pretty sure it's an animation that is there intentionally.
- mgkimsal 12y ago
  The eyelid animation is intentional, yes, but I'm not sure the partially closed eyes when the char size is increased was intentional.

restlessmedia 12y 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.

paulrouget 12y ago

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

codemaster3000 12y ago
Hah good one :D

toxican 12y ago

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

peaton 12y ago
Comic Book Guy looks pretty screwed up on Safari. What browser/os was this guy targeting?
- JasonFruit 12y ago
  Apparently Chrome. It's perfect for me.
probably_wrong 12y ago
In my case, in Firefox they look slightly messed up, while in Safari they are getting closer to ugly: http://imgur.com/XzW1uJG http://imgur.com/XzW1uJG But then again, when it comes to CSS I've come to always expect that kind of bugs.

alex_doom 12y ago

Nice demo, but SVG exists for a reason.

oneeyedpigeon 12y 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 12y 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 12y ago
Also, if you really want to tick the "in CSS" box you could add them as Data URIs

apierre 12y ago

This is the new ascii art

oneeyedpigeon 12y ago
More like the new Acid [1] test. [1] http://www.webstandards.org/files/acid2/test.html#top http://www.webstandards.org/files/acid2/test.html#top

pyrrhotech 12y ago

this is truly amazing. How long did it take?

remon 12y ago

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

JohnTHaller 12y ago

IE7/8: http://imgur.com/dG45PK5 http://imgur.com/dG45PK5 (posted by Uberhipster) IE6: http://i.imgur.com/7qYY9Ie http://i.imgur.com/7qYY9Ie (posted by me) From: r/programming: http://www.reddit.com/r/programming/comments/28ya9x/simpsons_in_css/ http://www.reddit.com/r/programming/comments/28ya9x/simpsons...

lsv1 12y ago
Looks like gooby pls