Minion drawn entirely using CSS

by rainboiboi • 13 years ago

176 51 13 years ago

ezecafre896• 13 years ago

Thanks for sharing!!! :D

maaaats• 13 years ago

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.

meerita3• 13 years 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.

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.

andrewingram• 13 years ago

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?

eksith4• 13 years ago

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.

hmottestad• 13 years ago

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.

ezecafre896• 13 years ago

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.

meerita3• 13 years ago

This made me remember the guy who paints with Excel.

jrarredondo2• 13 years ago

The purpose is also to... Learn.

khangtoh• 13 years ago

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

ezecafre896• 13 years ago

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

Regards!

jlengrand• 13 years ago

I had the same idea. And it made me think hard for a few minutes :).

pdpi• 13 years ago

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.

coldtea• 13 years 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.

jwarren• 13 years ago

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

arianvanp• 13 years ago

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.

alan_cx• 13 years ago

This is an example of "hacking".

This site's name is?

TranceMan• 13 years 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• 13 years ago

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

akdetrick• 13 years ago

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

jrarredondo2• 13 years ago

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.

statictype• 13 years ago

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

quackerhacker• 13 years ago

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.

Fuxy• 13 years ago

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

geekrax• 13 years ago

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

ezecafre896• 13 years ago

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

TheBindingVoid• 13 years ago

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

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

fredley• 13 years ago

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

minopret• 13 years ago

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!

brbcoding• 13 years ago

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.

splatcollision2• 13 years ago

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)

rrouse2• 13 years ago

That's not pure CSS though. It's a jpeg.

splatcollision2• 13 years ago

ahem That's the joke...

mac1175• 13 years ago

I gave him more hair http://cssdeck.com/labs/e8djo69n

doki_pen• 13 years ago

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

skriticos2• 13 years ago

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

Bjoern• 13 years ago

Love the hack! :)

Here have a blocky 3D version of it via tilt... http://i.imgur.com/wntUbWM.png

swang• 13 years ago

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

jeffmould• 13 years ago

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

rogerclark• 13 years ago

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

ezecafre896• 13 years ago

Superman Mode :P http://cssdeck.com/labs/pure-css-minion

Minion drawn entirely using CSS

Related Stories