Full Disclosure: He didn't ask me to do this, and I hope he doesn't mind.
This guy's been working on a freelance project for a Start-Up for me for the last few months as an all round front-end, back-end and UI/UX guy. Nothing but professionalism and great delivery all the way through. What i've loved about him most has been the fact that he's a great self-starter and has brought so many useful ideas to the table. Exactly what a Start-Up needs.
Also had the chance to meet him and his wife for Coffee a few weekends ago. Really nice guy.
If there are any Start-Ups here that are looking for a coder that has a very good sense of UI/UX, you should hire him. (my project is almost finished, so he'll be free soon).
I'm willing to personally vouch for his work ethic, credibility and talent.
Oh and all the work he did for me has been done remotely through BitBucket, email and Skype. I was very comfortable throughout in leaving him to his own devices.
He is the epitome of what it means to have a remote worker, so if you're a Start-Up outside of the UK thinking you can't hand him work because he's remote, think again.
No, stop it. Why is this #1 on HN right now? Just use SVG. This was fun as a demo a couple of years ago, but don't use this technique in production folks...
This guy built something that resonates with this community. He did a fantastic job.
You have done a service with your comment by pointing out that these are the wrong tools to implement it. I agree!
But I personally feel we don't get enough posts on this site showing things that people have built themselves. So regardless of how I feel about what someone built, if someone posts their work for praise or ridicule I applaud them.
I believe this was a creative use of css, and looks fantastic.
Because it neatly demonstrates the power of these CSS tools, and by exploring how these complex images were created we can see more easily how to apply the same techniques to more commonplace elements.
Why is this the top comment of the thread? Just use flag. This was a fun comment a couple of years ago, but don't use this in discussions over and over.
Flag? That's not the appropriate action when one disagrees with the use of a technology described in an article. Flagging is for inappropriate content or spam.
Voting down would be, if that was an option on HN.
It's a personal exercise in creativity and problem-solving. Much closer to art than to a construction project where thousands of lives and millions of dollars are at stake.
The Simpsons in CSS isn't development advice, it's a piece of art that you can learn some advanced CSS features from. Click on "How I did it" at the bottom.
I fail to see why this is such a bad solution, assuming one had a tool with an Adobe Illustrator alike interface yet it generated CSS code instead of SVG files. Maybe I am missing something fundamental, but as I see it, they both have pros and cons.
Clarification: I do not think he used such a tool. My point is that you are way to quick to take a dump on this technique. Just give me an efficient way of doing it, and it might not be such a bad idea after all.
Wow, this has to be the most awesome "X in CSS" demos I've seen!
As for performance, I can definitely see the decreased download size as beneficial, but what about rendering speed? All those elements and transforms must surely be heavier to render than a simple bitmap?
I will definitely check back to see if/when more characters are added!
From a practical perspective, SVG would be easier to create, while being just as small and fast. This seems to be just a demo of the capability of CSS.
Wow, thanks for sharing! I hadn't seen that before.
But, yeah, hand crafted Simpsons characters are more slightly more awesome than code generated css images. And both pretty insane as well :)
The claim on the blog is that this provide "obviously better performance" than an image, but is that true? Seems like browser could render an image faster that lots of CSS transforms.
There are already many tools that convert any image to pure CSS if you are interested in doing this. As well as using base64 in the img source, and javascript+canvas.
I suppose the value in doing this is that maybe an image could go right into an email to someone, or if you are hosting a page on the web somewhere that doesn't have the ability to upload images - but you still want to display one - just use CSS.
Otherwise - I'm not sure what this post is telling us. Did he do them by hand? Did he just convert some images using freely available tools? I'm not sure the value here other than to show people that there are other ways to display images in browsers than loading and showing the images themselves.
I decided to use classes rather than id's because I knew my project page would have multiple characters on it. So I didn't want to have multiple elements with an id of "left-eye" or "nose" etc. But I guess I could have prefixed everything with the characters name and used ID's instead.
From what I see in the CSS files, you already prefixed (edit: by prefixed, I mean child selectors) everything with the character's name, which is where my confusion comes from. Either everything should use class selectors, or characters should use a class selector and the constituent body parts should be ID selectors.
This indeed makes (almost) no sense. It makes no sense for sure if you intend to have several characters on the page — id must be unique, and it does not matter that something is in front of it.
.some-class #some-id makes sense only if you want to style page-unique elements differently in some cases but even in that case I'd argue that #some-page-id #some-id would be better (assuming #some-page-id is the body element id).
The calls to JavaScript functions that are ID-based would certainly not work. But there are many ways to access them that wouldn't.
In regard to the selector type, does Homer have more than one left eye? More than likely not, but that's why I suggested using all class selectors as an option. Using all class selectors would enable you to produce (a) as many Homers as you'd like and (b) as many left eyes, right eyes, mouths, etc as you'd like.
Mixing classes and IDs in CSS selectors causes headaches at scale because IDs change the order of precedence. These days I just avoid using them in CSS altogether.
We make a drawing app called WebCode (http://www.webcodeapp.com/) which can import SVG and PSD files and export CSS+HTML or JavaScript+Canvas code. Of course, converting SVG files to CSS is not something you'd generally use it for, but it can be done :-)
You're right. I know that CSS needs to be applied to a document; without a document there's nothing to be styled.
Still, to me saying that something is in "pure" CSS would imply that the HTML is not more complicated than e.g.:
<div id=homer></div>
(I guess that making a drawing such as the ones in the OP using only one div would not be possible until browsers accept pseudo-elements to be defined on top of other pseudo-elements.)
I understand that by "pure" the author meant "without using images". But IMHO using dozens of empty div elements isn't "pure" CSS.
This guy's been working on a freelance project for a Start-Up for me for the last few months as an all round front-end, back-end and UI/UX guy. Nothing but professionalism and great delivery all the way through. What i've loved about him most has been the fact that he's a great self-starter and has brought so many useful ideas to the table. Exactly what a Start-Up needs.
Also had the chance to meet him and his wife for Coffee a few weekends ago. Really nice guy.
If there are any Start-Ups here that are looking for a coder that has a very good sense of UI/UX, you should hire him. (my project is almost finished, so he'll be free soon).
I'm willing to personally vouch for his work ethic, credibility and talent.
Oh and all the work he did for me has been done remotely through BitBucket, email and Skype. I was very comfortable throughout in leaving him to his own devices.
He is the epitome of what it means to have a remote worker, so if you're a Start-Up outside of the UK thinking you can't hand him work because he's remote, think again.
Edit: Remote notes.