pattle / simpsons-in-css Goto Github PK

Currently everyone blinks at about the same time, especially when you first load the page.

Also, the blink animation itself is too slow.

These are excellent, though I feel with the Lego Simpson's sets neglecting Sideshow Bob, perhaps he can be honoured here?

It will be fun if their eyeballs rotate with my mouse point.

I checked on chrome for Windows and ChromeOs

Under what license is this repo distributed?

This is an awesome display for how shadow dom and web components could make really intricate items like this instantly sharable without having to worry about messing up other areas of the DOM.

The creating these as Polymer elements is really simple to do and I have created a fork of the project here that has examples of Apu and Homer.

Would be great to refactor these into scss with variables. That way one could easily change the colors. I might do it during the weekend if I have time.

Could further enhance with (optional) shadows

#marge .head .hair-circle, #marge .left-eye, #marge .right-eye {
    box-shadow: 0 0 2ex rgba(0, 0, 0, .33);
}

It would be cool to replace IDs with classes for reusable elements. :-) What if you want to have 2 barts instead of just 1. :-)

At the bottom of your project page (https://pattle.github.io/simpsons-in-css/) there is a minor typo:

"What's really cool is I can now do stuff like that this..."

You could change it to: "What's really cool is now I can do stuff like this..." or some variant thereof without using the word "that."

Just a short little Gist which will move the eyeballs according to your mouse position. Calculation is not quite correct, as it ignores the position of the head on the page, but it works quite well.
Performance could be better (especially on the project page with all heads combined).

https://gist.github.com/EarMaster/935846a9d919cc6d8224

Have fun!

Can we have them do an action/blink/animate on mouse hover?

Hi.

What do you think about moving the CSS in src, remove vendor prefixes, add grunt with autoprefixer, csslint etc etc and output the CSS in the /css directory? This will improve things a lot. You won't need to care about vendor prefixes, we can validate HTML/CSS and much more.

If you are interested I can provide a PR for this.

See screenshot

As the Simpsons in CSS site is using some elements which aren't supported in old versions of Internet Explorer, visitors using those browsers will see that their Springfield heroes have been transported to Blockoland:

The site already has a "Best displayed in Chrome" indicator, and anyone who's still running on IE7 or IE8 is doing so at their own risk, but there could be value in providing some sort of redirect / alternate content for users with those browsers, rather than letting them see sub-optimal rendered content.

Depending on whose stats you believe, Internet Explorer 7 & 8 combined have about a 6% market share, so it's not an insignificant number of users who might be seeing this problem.

NB: Microsoft is officially dropping support for pre-IE9 browsers in January 2016, which is likely to lessen the number of visitors who are using such browsers.

First of all, thanks for your awesome work.

(Best viewed in Chrome)

I opened your page both in Firefox and Chrome and I see no difference. The web is the platform, to develop for a specific render engine is dangerous, because we are going to reproduce the IE6 nightmare. Especially here, where the website doesn't use any specific technology and is fully functional on different modern browsers.

Please drop the "Best viewed in Chrome" indication. (I would have done it in a pull request but didn't find it on this repo, I guess the presentation page is not here).

Krusty's eyebrow is incomplete.

The project should really be titled The CSSimpsons
:)