pattle / simpsons-in-css Goto Github PK
View Code? Open in Web Editor NEWSimpsons characters in CSS
Simpsons characters in CSS
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.
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.
These are excellent, though I feel with the Lego Simpson's sets neglecting Sideshow Bob, perhaps he can be honoured here?
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."
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.
It would be cool to replace IDs with classes for reusable elements. :-) What if you want to have 2 barts instead of just 1. :-)
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.
Can we have them do an action/blink/animate on mouse hover?
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).
The project should really be titled The CSSimpsons
:)
Currently everyone blinks at about the same time, especially when you first load the page.
Also, the blink animation itself is too slow.
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!
It will be fun if their eyeballs rotate with my mouse point.
Krusty's eyebrow is incomplete.
Under what license is this repo distributed?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.