Not to detract from the creativity here, but the id attribute specifies its element's <i>unique</i> identifier[1]. Strictly speaking, this should never happen:<p><pre><code> <div id="b7">
<div id="b71">
<div id="b71">
<div id="b71">
<div id="b71">
...
</code></pre>
[1] <a href="http://www.w3.org/TR/2013/WD-html51-20130528/dom.html#the-id-attribute" rel="nofollow">http://www.w3.org/TR/2013/WD-html51-20130528/dom.html#the-id...</a>
This is nuts -- but sadly dancing Bender is not too practical. (Unless the dancing trend catches on and GitHub releases the dancing Octocat to production...)<p>For more practical CSS madness, I'd recommend Ana Tudor's creations[1]. She had a cool talk at CSSConf.eu about the math behind building some of her CSS creations.[2]<p>[1]: <a href="http://codepen.io/thebabydino/public/" rel="nofollow">http://codepen.io/thebabydino/public/</a><p>[2]: <a href="http://www.youtube.com/watch?v=w9HeWBH_kvg" rel="nofollow">http://www.youtube.com/watch?v=w9HeWBH_kvg</a>
For those of you who are bound to ask the point, this is pure hacking. You are given a technology and you produce a result, sometimes for the fun of it! Thanks for this! I learned a bit.
I love when people see the potential to use HTML structure as a makeshift DAG. Similarly, once the DOM got fully grokked in the mid-2000s, it was if the web changed overnight. From flat documents to a flexible graph. And to do this without JS? We're talking no actual imperative code here, just dead structure and presentation markup.<p>This is one of the first CSS animations I've seen that works flawlessly for me, at least on the iPhone. I also noticed the non-unique ID attrs as is noted below, but let's be real. With that amount of CSS to conceive of and write, would you really glance twice at the twenty lines of HTML you're using as a fly-by-night DAG? For a non-commercial passion project? The creator of this was in the ZONE!<p>The pure insanity makes me grin and long for the pre-teen days where there was time for this. All the ANSI art, the HyperCard stacks, the strange games made using dirt-cheap language implementations. Sigh, but a nice sigh. Also makes me damn grateful for open source and standards.
This is really neat. I'm really interested in seeing how all these new fancy CSS3/HTML5 features shape the evolution of casual online games. Back in the day it was either static images, like the Neopets sort of thing (which are still pretty common with young kids I think - Webkinz is a cash cow and that site looks straight out of my childhood), or slow awful Flash games that usually didn't have any data persistence. Even if this Bender example is kind of hacky as other comments are indicating, the possibilities still seem pretty limitless.
I can't believe this show is off the air. Again. Forever. :-(<p>Anyways, I hope ad people don't catch on to how CSS is a bit harder to block than JS.
Unfortunately Bandcamp's embed doesn't seem to be working in Firefox/liveweave for me, but here's a theme song added:<p><a href="http://liveweave.com/bhu7HB" rel="nofollow">http://liveweave.com/bhu7HB</a>
neat!<p>I've gotten into CSS3 and JS recently but I'm not sure how this works.<p>Can someone explain to this old C dog the principles of how it works, though? I thought this would require JS to work?<p>I apologize in advance for being out of touch. :(
After a while the legs and to some degree arms go out of sync with the rest <a href="http://i.imgur.com/EMGqXA3.png" rel="nofollow">http://i.imgur.com/EMGqXA3.png</a>
remind me of CSS 3D teapot.<p><a href="http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot-in-html-by-brian-beckman-and-erik-meijer-1266" rel="nofollow">http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot...</a>