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.
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...)
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]
Yeah, I don't want to be critical -- just wanted to point to some other lower-level shapes that might be easier for others to learn from and build upon. 100% believe we need more dancing characters, not less.
I've seen her work posted around before, and always found myself really impressed. Thanks for the link to that video, I think it may have sparked an interest in geometry for me.
And I disagree about the practicality of a dancing bender. It's a tech demo if nothing else. I can picture a future where things like this are much easier to accomplish in CSS and we move on from using traditional images.
A lot of the neat features used in demo's like this (although I haven't checked this ones code specifically yet) often rely on prefixed features and the like; it's more for showing what could be, rather than what is per se.
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.
Not to detract from the creativity here, but the id attribute specifies its element's unique identifier[1]. Strictly speaking, this should never happen:
I don't think any Javascript is in use at all here, but if it were I would not expect errors but instead simply unexpected behaviour as browsers tend to just try do something if what you are asking isn't clear (for instance if a jquery selector returns nothing, any changes you chain after the call just apply to that nothing instead of complaining that they expect to have some nodes to act on).
Multiple elements with the same ID is wrong of course, so you can't guarantee what will happen if you use and ID based selector: three equally (in)correct interpretations would be "act on the first element you find with that ID", "act on all elements with that ID", and "error because we don't expect to find more than one". By breaking the standard you are exposing yourself to undefined behaviour - the browser can do what it likes and each environment might do something different.
"strictly speaking" is right. It's invalid but all major browsers will handle the code just fine. Browsers are pretty damn forgiving.
It's also an easy mistake to make. All someone has to do is create an element with an ID in a child template without checking to see if that ID is already used in a parent template.
Is it possible to enable some switch in Chrome to force the browser to render only correct code in dev mode? This would catch me making mistakes that otherwise go unnoticed.
On the note of forgiving browsers, I love how they are a very accepting interpreter of information, much like a human listening to someone's broken English and still understanding what is being said.
66 comments
[ 4.6 ms ] story [ 114 ms ] threadFor 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]
[1]: http://codepen.io/thebabydino/public/
[2]: http://www.youtube.com/watch?v=w9HeWBH_kvg
That was best left in that last century...
For the young ones: http://en.wikipedia.org/wiki/Office_Assistant
And I disagree about the practicality of a dancing bender. It's a tech demo if nothing else. I can picture a future where things like this are much easier to accomplish in CSS and we move on from using traditional images.
It seems to bring into question the practicality of multi-browser support of these complex 'apps' utilizing fancy CSS and HTML5.
Reminded me the undead break dance from the inXile's Bard's Tale: https://www.youtube.com/watch?v=sP_7nFldRtY
I am wondering if this works in anything aside from Webkit based browsers.
I've gotten into CSS3 and JS recently but I'm not sure how this works.
Can someone explain to this old C dog the principles of how it works, though? I thought this would require JS to work?
I apologize in advance for being out of touch. :(
I did this: http://lucianmarin.com/peculiar/
Is there some tool they used to make this? Because my human brain can't imagine how this came to exist.
I don't see any magic here. Modern CSS3 lets you build arbitrary geometry with arbitrary animations if you're crazy enough.
What I do see here is an excellent grasp of Cartesian geometry and some serious dedication. Which I suppose is no less magical.
Pure comment gold.
Fail!
I'm not aware of any games that use CSS3 for the ingame graphics, though.
Never used it.
http://liveweave.com/bhu7HB
Multiple elements with the same ID is wrong of course, so you can't guarantee what will happen if you use and ID based selector: three equally (in)correct interpretations would be "act on the first element you find with that ID", "act on all elements with that ID", and "error because we don't expect to find more than one". By breaking the standard you are exposing yourself to undefined behaviour - the browser can do what it likes and each environment might do something different.
It's also an easy mistake to make. All someone has to do is create an element with an ID in a child template without checking to see if that ID is already used in a parent template.
On the note of forgiving browsers, I love how they are a very accepting interpreter of information, much like a human listening to someone's broken English and still understanding what is being said.
http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot...
Anyways, I hope ad people don't catch on to how CSS is a bit harder to block than JS.
Just in time for halloween.