10 ms·
Minion drawn entirely using CSS
- ezecafre89 13y agoThanks for sharing!!! :D
- maaaats 13y agoWhen reading the headline: Hmm, I can draw stick figures in CSS as well.. When seeing the result: Impressive! Still, a bit pointless, but still a cool thing to try and experiment with.
- meerita 13y agoI wish no one take this as an offense. But I will repeat the same speech I say when I see these examples: wrong use of CSS for nothing. May this help the author with adversiting his skills but the truth about these is they're totally useless and waster ways of making stuff for the web. You can do that minion properly with SVG and be more semantic than that thing. If authors wanted to draw using code, why not improving skills with something proper, and the best thing I know is SVG, period.
- jwarren 13y agoWhat's the name of this site? I don't think it's "Use Tools For Their Intended Purpose Only News"
- arianvanp 13y agoAnd my standard response to this standard response is: Hey it's hacker news. We hack things and share it with the world! I love it when people have the 'because I can' mentality. And through experimentation and uselessness we build experience in the serious things we have to do in life. Edit: I accidentally a verb.
- andrewingram 13y agoSometimes it's fun to build something just to see if you can. Why else would I have been making Jedi Knight levels for 10 years rather than using a far more capable (and easier to use) engine?
- eksith 13y agoThere's a fella who built a helicopter for himself out of a whole bunch of small electric motors and a battery pack that looks bit like a pilates ball. ...because he can. These types of demos exist to show what can be done with a bit of experimentation. It may not be salable, scalable or sane. But it's interesting nonetheless. The purpose of this is to not be useful. The purpose of this is to exist.
- hmottestad 13y agoI also felt like ranting about the ranter. But couldn't find the energy. Thank you for giving a good example. You could just have stopped at "fella who built a helicopter" since that in its self is almost always useless :D PS: I love helicopters but could never justify buying anything more than a 3Ch mini helicopter.
- eksith 13y agoIf you're feeling adventurous, there are quadrocopter kits now that are quite reasonably priced and not too difficult to build and maneuver. With a bit of tinkering, I'm sure someone will find a way to create a web based interface with CSS/HTML5 and JSON postback to control one live ;)
- Robin_Message 13y agohttp://nodecopter.com/ http://nodecopter.com/ (no affiliation, but sounds like what you want :-) )
- deleted 13y ago[deleted]
- jastr 13y agoThat would be me! I'm hacking an off-the-shelf quadcopter to be flown using an arduino and some python scripts.
- clicks 13y agoYou know, this happens a lot here -- this exact same thing. Someone makes an elaborate piece of art with CSS, you get some response saying hey CSS wasn't meant for this and to complete the cycle finally you'd have a comment saying "but he's just being a hacker, this is how we get innovation!". It's great we celebrate hacker culture, -- as we well should, but isn't art via CSS getting a bit hackneyed by now? And are there really people still out there who're unaware that they can do this kind of snazzy stuff with CSS? Certainly though if for example someone mockingly questioned something like Fabrice Bellard's PC emulator in Javascript for its lack of practical good we would rightfully come down on them. I certainly don't mean to criticize the author here -- he is very obviously an expert at CSS, but I'm not sure if we can put 'fella who built a helicopter' in the same category as CSS art.
- khangtoh 13y agoIt could be interesting if the code wasn't hand-coded and was auto-generated from an image editing tool
- ezecafre89 13y agoI don't want to disappoint you but it was hand-coded in the same Codepen.io editor :P Regards!
- bsaul 13y agoI think he meant that it would be even more interesting to have a tool that would autogenerate the css from a drawing.
- ezecafre89 13y agoYeah, that is why i said this is not the case unfortunately. :(
- jlengrand 13y agoI had the same idea. And it made me think hard for a few minutes :).
- pdpi 13y agoAs some other people said (while, unfortunately, missed the whole point of the exercise said), this is completely impractical and the altogether the wrong technology to actually _do_ this sort of thing in production. It's really just meant to push boundaries and be a demo of what can be done in CSS (at least I hope that's the intent). If you're going to tackle the "autogenerate" problem, it's probably a lot more interesting to do so in SVG or something of that ilk.
- coldtea 13y ago>I wish no one take this as an offense. But I will repeat the same speech I say when I see these examples: wrong use of CSS for nothing. That's one thing that hackers are KNOWN to do. Build stuff for fun.
- alan_cx 13y agoThis is an example of "hacking". This site's name is?
- TranceMan 13y ago>If authors wanted to draw using code, why not improving skills with something proper, and the best thing I know is SVG, period I would imagine the OP could quite easily do this using SVG - he didn't - he chose the hard and interesting route - for fun and because he could. If you ask me projects like this improve skills - mainly solving a problem - even if the 'problem' is subjective.
- medde 13y agoIt is like saying don't build a house out of legos... you probably should use some lumber instead.
- akdetrick 13y agoI usually agree with this, usually because we often see things like "icons/logos drawn in pure css", which implies someone maybe thought it was a good idea to actually use in a project. This demo, however, seems to me to be just for fun. It does serve a purpose though; it's nice to get such an impressive view into what's possible with CSS now, and these demos can also be used for performance testing. It's pretty interesting to take something so rendering-heavy, open a profiler and see what happens when you start transforming, animating, and modifying it (one article comes to mind that uses the "pure css macbook" to demostrate the performance of translate vs. position[1]). [1] http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ http://www.paulirish.com/2012/why-moving-elements-with-trans...
- jrarredondo 13y agoNot to mention that you end up knowing a lot more about [the tool] than you knew before the project, given that it is such an unusual project.
- statictype 13y agoFortunately this is Hacker News, not Web Standards News so it's getting the traction here that it deserves.
- quackerhacker 13y agoGood work! I think it's a great demonstration of css and it's capabilities (as well as the devs skills). This is one of my own downfalls, I'll spend hours (sometimes days) on css UI when there is always a faster and easier method to implement.
- Fuxy 13y agoWow. Nice! CSS has become a lot more flexible over the years.
- geekrax 13y agoIt's amazing to impress your clients, but why didn't you make him smile ??
- ezecafre89 13y agoHaha Good question!! He's smiling now!!
- TheBindingVoid 13y agoEvery time someone abuses CSS in such a way a puppy dies. Edit: I forgot about HTML. That explains the dead kitten.
- fredley 13y agoGiven the animation, I was disappointed not to see a <blink> tag.
- minopret 13y agoI like it. Before clicking I thought perhaps he had used CSS to render Adobe's commercially important multiple-master typeface. That would have shocked me. So forgive me for feeling a little bit let down!
- brbcoding 13y agoAwesome job... I don't share many pens on FB, but I definitely shared this one when I saw it. Lol @ the comments about it being the wrong use of css... That's obviously not the point. I love creating css art... because I can, and it's fun.
- splatcollision 13y agoYou may also like the Pure CSS Horse: http://codepen.io/anon/pen/tvaio http://codepen.io/anon/pen/tvaio (not intended as negative in any way towards the original artist, who is awesome)
- rrouse 13y agoThat's not pure CSS though. It's a jpeg.
- splatcollision 13y agoahem That's the joke...
- rrouse 13y agoDoesn't seem like a joke on your part, but I'll take your word for it :). Should be more clear in the future that you intended that to be a joke.
- mac1175 13y agoI gave him more hair http://cssdeck.com/labs/e8djo69n http://cssdeck.com/labs/e8djo69n
- doki_pen 13y agoA new meme is being born. "534 hours in CSS"
- deleted 13y ago[deleted]
- swang 13y agoThere is mouth animations but I don't see the mouth moving at all. Anyone see anything? On Chrome/Win7 ATM.
- jeffmould 13y agoThe animations for the mouth appear to be commented out. If you take the comments off it seems to work. At least for me.
- skriticos2 13y agoThat seems like a fun way to exercise those brain cells.
- Bjoern 13y agoLove the hack! :) Here have a blocky 3D version of it via tilt... http://i.imgur.com/wntUbWM.png http://i.imgur.com/wntUbWM.png
- rogerclark 13y agofrankly i'm blown away that anyone on earth likes Despicable Me enough to do anything like this
- ezecafre89 13y agoSuperman Mode :P http://cssdeck.com/labs/pure-css-minion http://cssdeck.com/labs/pure-css-minion