Minion drawn entirely using CSS | Hacker News Reader

Minion drawn entirely using CSS

cssdeck.com

176 pointsrainboiboi51 comments

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.

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?

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.

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.

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 ;)

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.

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 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.

  > Are there really people still out there who're unaware that they can do this kind of snazzy stuff with CSS?

Have you met our species? We're quite varied.

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.

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...

Yep. That japanese guy.

The purpose is also to... Learn.

It could be interesting if the code wasn't hand-coded and was auto-generated from an image editing tool

I don't want to disappoint you but it was hand-coded in the same Codepen.io editor :P

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 :).

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.

>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.

What's the name of this site? I don't think it's "Use Tools For Their Intended Purpose Only News"

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.

This is an example of "hacking".

This site's name is?

>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.

It is like saying don't build a house out of legos... you probably should use some lumber instead.

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...

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.

Fortunately this is Hacker News, not Web Standards News so it's getting the traction here that it deserves.

Given the animation, I was disappointed not to see a <blink> tag.

You may also like the Pure CSS Horse: http://codepen.io/anon/pen/tvaio

(not intended as negative in any way towards the original artist, who is awesome)

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.

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.

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.

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.

It's amazing to impress your clients, but why didn't you make him smile ??

Haha Good question!! He's smiling now!!

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!

Wow. Nice! CSS has become a lot more flexible over the years.

Love the hack! :)

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

There is mouth animations but I don't see the mouth moving at all. Anyone see anything? On Chrome/Win7 ATM.

The animations for the mouth appear to be commented out. If you take the comments off it seems to work. At least for me.

That seems like a fun way to exercise those brain cells.

A new meme is being born. "534 hours in CSS"

frankly i'm blown away that anyone on earth likes Despicable Me enough to do anything like this

Thanks for sharing!!! :D

Every time someone abuses CSS in such a way a puppy dies.

Edit: I forgot about HTML. That explains the dead kitten.

Reply on news.ycombinator.com