13 ms·
Simpsons in CSS
- arpstick 13y agoIt'd be cool if there was a tool to assist in the creation of such arts.
- sktrdie 13y agoCan't you use the new Google thing for animations to do lots of this? https://www.google.com/webdesigner/ https://www.google.com/webdesigner/
- newsmaster 13y agoHere: http://www.chrispattle.com/blog/simpsons-in-css/ http://www.chrispattle.com/blog/simpsons-in-css/ Now you're 1 step closer to figuring out how to build this tool :)
- patatino 13y agoAmazing. How many hours of work?
- pattle 13y agoThanks. I'd say each character took me around 2-3 hours. After doing a couple you can begin to re-use eyes and noses etc.
- maddisc2 13y agoThis is very cool. Great Work!
- pattle 13y agoThank you
- andyroid 13y agoWow, 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!
- hrjet 13y agoFrom 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.
- garethadams 13y agoDecreased download size compared to what?
- jlas 13y agoMore awesome than the Mona Lisa in CSS? (https://news.ycombinator.com/item?id=4610243 https://news.ycombinator.com/item?id=4610243)
- andyroid 13y agoWow, 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 :)
- fest 13y agoI'm wondering, how hard could it be to write a tool which converts (at least a basic subset of) SVG to CSS.
- hk__2 13y agoWhy would anyone do that?
- PixelCut 13y agoWe make a drawing app called WebCode (http://www.webcodeapp.com/ 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 :-)
- booop 13y agoBeautiful, and the CSS itself is beautifully organized.
- nudetayne 13y agoNot really, the CSS might be organized, but overall it's pretty terrible. Classes are for multiple instances and IDs are for unique instances.
- pattle 13y agoI 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.
- nudetayne 13y agoFrom 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.
- sbarre 13y agobut then wouldn't document.getElementById() calls get confused, even though your IDs are nested? Shouldn't it be the other way around? #homer .left-eye { ... } #bart .left-eye { ... } makes more sense to me than .homer #left-eye { ... } .bart #left-eye { ... }
- nudetayne 13y agoThe 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.
- Artemis2 13y agoI can't even center text vertically in CSS... This is beautiful !
- jcklnruns 13y agoIt IS! Very very cool :)
- jlas 13y agoVertical alignment is a real pain; flexbox offers a nice solution: http://jsfiddle.net/Pr22b/ http://jsfiddle.net/Pr22b/ (Disclaimer: flexbox is still 'bleeding edge' https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...)
- elefont2 13y agoThis is pretty cool. It makes we wonder if it would be possible to create an automatic SVG-to-CSS converter
- jstsch 13y agoNo, 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...
- mdigi 13y agoI'm glad someone shares my opinion on this. Drawing with CSS is like moving to a new place using a cartwheel instead of a truck.
- johnpmayer 13y agoIt's not the best tool for the job, but it's still a hack. Lighten up. Should all CSS demos come with this disclaimer now?
- marrs 13y agoWhy is this #1 on HN right now? 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.
- Killswitch 13y agoIt's #1 on HN because people voted on it, now stop being a whiny ass and just move to the next one if you don't like it.
- adam12 13y agoBecause this is clearly a hack and the name of this site is Hacker News.
- lignuist 13y agoWhy 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.
- code_duck 13y agoFlag? 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.
- mayankkp 13y agoAwesome! Made me laugh just looking at the characters. Good work!
- dajo 13y agoWhen viewed in IE8 or lower, it looks like the animation from season 1!
- exo_duz 13y agoGreat Work! Looks real good. Hope he plans to do more :)
- pattle 13y agoThank you. Yes I plan to do some more. Apu is nearly done and I'll add a few more characters after that.
- apierre 13y ago"Everything done in CSS" fad makes me think this is the new ASCII art
- mrtbld 13y agoWhile I appreciate the effort, claiming that is it "pure CSS" is not true. The page is made out of 235 divs, and divs are not CSS but HTML.
- code_duck 13y agoThere is no CSS without HTML. And, there is no HTML without CSS as browsers contain built in style sheets.
- boomlinde 13y ago> there is no HTML without CSS * HTML 2.0: 1995 * CSS 1: 1996 That must have been a hard year for HTML 2.0, not to mention half a decade for HTML altogether.
- deleted 13y ago[deleted]
- code_duck 13y agoYes, things were definitely different 17 years ago.
- mrtbld 13y agoYou'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.
- code_duck 13y agoI see what you mean. Saying CSS/HTML would be a more precise way of describing this.
- kevonc 13y agowow haha impressive
- linssen 13y agohttp://en.wikipedia.org/wiki/Scalable_Vector_Graphics http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
- gokhan 13y agoAnd here's one in Html tables: http://pastebin.com/XAUpNZ44 http://pastebin.com/XAUpNZ44 So what?
- topherjaynes 13y agoSo who's going to tackle the opening sequence of the Simpson's with pure CSS animations?
- rfnslyr 13y agoI'm like 98% compelled to quit my job just to see this come to fruition.
- shmerl 13y agoI think SVG makes more sense for this. CSS is not intended to be vector graphics format.
- krmmalik 13y agoFull 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. Edit: Remote notes.
- deleted 13y ago[deleted]
- krmmalik 13y agoThanks. Good point. We've had a chat and i've edited. Would you mind editing your comment or removing? I've followed yours and his advice. Thanks.
- deleted 13y ago[deleted]
- aDevilInMe 13y agoI'm willing to personally vouch for his work ethic, credibility and talent. Does this include him respecting copyrights?
- schnable 13y agoThe 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.
- Segmentation 13y agoBy the title, I was hoping this was the Simpsons opening done entirely in CSS using animations. I bet it's possible, but would require insane effort. Still awesome though.
- avalaunch 13y agoVery impressive but where's Lisa? Was she harder than the rest to get right?
- j2oomee 13y agoInteresting that Homer's line count is less than the rest. Homers simplicity is even reflected in CSS!
- timjensen 13y agookely dokely
- dpcan 13y agoThere 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.
- zevyoura 13y agoCheck out the DOM structure of the character heads, these were almost certainly done by hand.
- jennibear 13y agowhere is the link?? I can't see anything