Cool logo or web element with only CSS3 for free

Hi, I was work on this about 2 years ago and found it again now.
Maybe for someone this will be interesting, feel free to use it, just see page source.

I was call it CSS Ninja, and it's animate with jQuery but non animated is only CSS3.

http://zodumil.net/lab/css3-ninja/

 

Shame it wastes so much "jquery for nothing", be fun to see how clean that could be with properly formatted code and without the stupid malfing halfwit bloated jquery nonsense. (Can you tell I'm a fan?)

That said, I'm loving all the stuff you can do with CSS3... the little drawing you have there is a great example of that in action. I did something similar (not animated) to draw a picture of old computer monitors around an object embed on my retrogames that run in various Java emulators.

http://www.deathshadow.com/pakuPakuLive
http://www.deathshadow.com/pakuPakuLiveC64

The "monitors" on both those pages use no images and are built entirely with markup and CSS3.

It's funny, I'm starting to think we should forget SVG and Canvas, and instead have that type of stuff in the CSS since for the most part, it is presentation; and as always presentation belongs in the CSS, not the markup, not the scripting, and sure as shine-ola not a object.

 

Thanks man, and here is more useful example:

http://zodumil.net/lab/naughty-ninja/

 

It is very cool animation @loop I am going to use this in some of the upcoming projects... or even will try to use in my own blog too... Thank man for this stuff...

 

Nice work! I really want to have a go at creating something like that.

Thanks for sharing.

 

I just rewrote it to not rely on jquery at all -- in fact all the scripting does is build the elements (so you can cache them across pages and so they don't exist for scriptless users), and do simple class swaps on the outer-most div and swap the button texts. The class swaps trigger CSS transitions to handle all the animations.

http://www.cutcodedown.com/methods/fingerman/template.html

The eyeball animation is much smoother thanks to this, I rotate the entire eyeball to set the position, then counter-rotate the cornea so the highlights remain 'fixed'. Was almost the exact same code size until I decided to add a few more 'finger animations', hence the new name I put on it.

Instead of a fat bloated library, I like to pick and choose functions I'm actually going to use and ignore the rest...

Really the CSS transitions illustrate how pointless 90%+ of the jQuery codebase has become with it's stupid malfing 'slidein', 'fadein' garbage that doesn't render smoothly in ANY browser. (at least not by my standards); part of why I say that massively bloated asshat bull has no business on websites in the first place. Most of such animations can be quite easily done with CSS and a simple class swap now.

Admittedly, doesn't work in IE9/lower -- OH WELL when you are already using CSS3 to build the little blighter.

 

You was bring it on next level , especially with "roll eyes" , but it's also awesome when combine "go left" and "hide".
Added link to you version. Many thanks!