CSS3 Android Logo

View code Play Walkthrough

Description

Android logo made in CSS3 with hover animations using CSS3 transitions. Originally made by Diogo Corrêa.

Add New Comment

21 Comments

(close)
Marius

Marius

That’s just amazing. Great job. Working in Chrome, Firefox, Safari. Ok in Opera, only not moving :) Of course, not working in IE :p

Vladimir Starkov

Vladimir Starkov

You are using wrong order of vendor-prefixes:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

And the right order is:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Fransuisse

Fransuisse

Instead create propertie CSS “.l_arm,.r_arm” you can create a class arm applicated in the arm div and remplace “.l_arm,.r_arm” by “.arm”. I think that take less charactere

Ryan

Ryan

I think you just taught me how to draw in CSS :D

hamimferdous

hamimferdous

Great work man! keep it up!

Daniel Silver

Daniel Silver

Amazing work!

macs

macs

put a bleepin pause button on it! the pause button doesn’t work!!!!!

Davide

Davide

Great job. Very beautiful!!!!!!!

fan

fan

You help me to open another window!!!English is not good,sorry

e11world

e11world

I love how this shows me and teaches me the new css techniques. Thank you very much!

Tom

Tom

The pause button doesn’t work, but the android does! Nice!

Greg B

Greg B

Yeah…I found this frustrating. I wondered why it didn’t look right even after following along. Then I copy and pasted the code…it didn’t look any different! The arms are WAY OFF and couldn’t get the body to show up at all!

Rainy

Rainy

So cute!THX for sharing!

Trib

Trib

Cool stuff.

Nathan

Nathan

Pause button works, but you need to hit the ‘play walkthrough’ button rather than just pressing play on the bottom.

Joeb Rogers

Joeb Rogers

You’ll notice the transition has only been applied to work with browsers that support -webkit- .

You can get the transition to work in other browsers (like firefoz, probs not IE) by following the same pattern used elsewhere in the code, by replacing -webkit- with -moz-, or even just having -’the code’.

Hope I helped others that noticed this, not sure why this was left out.

zawad

zawad

Why do you write div div in css? What does it mean?

c1trusfru1t

c1trusfru1t

Great job. Thanks for sharing.
Would I be able to get the head, left arm and right arm all to do the transition on hover over the body?
If so, how would you do it?

c1trusfru1t

c1trusfru1t

zawad, ‘div div’ targets any inside another

5x 10x 15x 20x

21 Comments

Description