Minion drawn entirely using CSS(cssdeck.com)
cssdeck.com
Minion drawn entirely using CSS
http://cssdeck.com/labs/pure-css-minion
53 comments
That's not pure CSS though. It's a jpeg.
ahem That's the joke...
Doesn'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.
Should be more clear in the future that you intended that to be a joke.
Awesome 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.
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.
I 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!
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!
Love the hack! :)
Here have a blocky 3D version of it via tilt... http://i.imgur.com/wntUbWM.png
Here have a blocky 3D version of it via tilt... http://i.imgur.com/wntUbWM.png
Superman Mode :P http://cssdeck.com/labs/pure-css-minion
I gave him more hair http://cssdeck.com/labs/e8djo69n
That seems like a fun way to exercise those brain cells.
frankly i'm blown away that anyone on earth likes Despicable Me enough to do anything like this
Thanks for sharing!!! :D
When 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.
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.
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.
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.
There'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.
...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.
That is a good answer, I made it 'cause I can! haha
No, now seriously... It was something I made, like he said, for advertising. I though that maybe was a good idea show something unusual to my clients trying to catch their attention and that's it. And today i woke up and i saw all these people talking about it. Unbelievable.
Thanks you guys for your opinion. I appreciate it.
Thanks you guys for your opinion. I appreciate it.
I 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.
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.
You 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.
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.
It's not in the same category as CSS art in the sense they're equivalent accomplishments. I imagine a helicopter failure has a potentially lethal outcome vs. carpal tunnel for repeated CSS hacking.
They are in the same category as... "because I can". Which doesn't seem like something worthy of celebration, but creative expression in unexpected forms should be admired regardless of medium.
They are in the same category as... "because I can". Which doesn't seem like something worthy of celebration, but creative expression in unexpected forms should be admired regardless of medium.
> Are there really people still out there who're unaware that they can do this kind of snazzy stuff with CSS?
If 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 ;)
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 ;)
http://nodecopter.com/ (no affiliation, but sounds like what you want :-) )
That would be me! I'm hacking an off-the-shelf quadcopter to be flown using an arduino and some python scripts.
[deleted]
This made me remember the guy who paints with Excel.
You mean this guy?
https://www.google.com/search?q=Tatsuo%20Horiuchi&um=1&tbm=i...
https://www.google.com/search?q=Tatsuo%20Horiuchi&um=1&tbm=i...
Yep. That japanese guy.
The purpose is also to... Learn.
I 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-trans...
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-trans...
Not 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.
Sometimes 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?
And 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.
Edit: I accidentally a verb.
>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.
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.
This is an example of "hacking".
This site's name is?
This site's name is?
What's the name of this site? I don't think it's "Use Tools For Their Intended Purpose Only News"
Fortunately this is Hacker News, not Web Standards News so it's getting the traction here that it deserves.
>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.
That's one thing that hackers are KNOWN to do. Build stuff for fun.
It is like saying don't build a house out of legos... you probably should use some lumber instead.
It could be interesting if the code wasn't hand-coded and was auto-generated from an image editing tool
As 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.
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.
I don't want to disappoint you but it was hand-coded in the same Codepen.io editor :P
Regards!
Regards!
I think he meant that it would be even more interesting to have a tool that would autogenerate the css from a drawing.
Yeah, that is why i said this is not the case unfortunately. :(
I had the same idea. And it made me think hard for a few minutes :).
Good 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.
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.
Wow. Nice! CSS has become a lot more flexible over the years.
It's amazing to impress your clients, but why didn't you make him smile ??
Haha Good question!! He's smiling now!!
Every time someone abuses CSS in such a way a puppy dies.
Edit: I forgot about HTML. That explains the dead kitten.
Edit: I forgot about HTML. That explains the dead kitten.
Given the animation, I was disappointed not to see a <blink> tag.
(not intended as negative in any way towards the original artist, who is awesome)