Android robot in 100% pure CSS

20 September 2011

The Android robot is a cool logo made of fairly simple shapes. My challenge was to recreate the logo with pure CSS and as less HTML as possible.

CSS3 enabled browser needed (ie9+, firefox, chrome or opera)!

<div class="android">
    <div class="head">
        <div class="eyes"></div>
    </div>
    <div class="body">
        <div class="arms"></div>
    </div>
</div>

.android {
    position: absolute;
    left: 320px;
  top: 230px;
}
/**** BODY ****/
.body {
    width: 336px;
    height: 285px;
    background-color: #A5C63B;
    border-radius: 0px 0px 30px 30px;
    position: absolute;
}
.body:before,
.body:after {
    background-color: #A5C63B;
    content: '';
    width: 75px;  
    height: 122px;
    bottom: -122px;
    position: absolute;
    border-radius: 0px 0px 50px 50px;
}
.body:before { left: 68px; }
.body:after{ right: 68px; }
/**** HEAD ****/
.head {
    width: 336px;
    height: 155px;
    background-color: #A5C63B;
    border-radius: 200px 200px 0px 0px;
    position: absolute;
    top: -170px;
}
.head:before,
.head:after {
    background-color: #A5C63B;
    content: '';
    width: 10px;  
    height: 53px;
    position: absolute;
    top: -30px;
    border-radius: 20px 20px 0px 0px;
}
.head:after { -webkit-transform: translate(63px, 0px) rotate(-30deg); -moz-transform:translate(63px, 0px) rotate(-30deg); -o-transform:translate(63px, 0px) rotate(-30deg);  }
.head:before{ -webkit-transform: translate(255px, 0px) rotate(30deg); -moz-transform:translate(255px, 0px) rotate(30deg); -o-transform:translate(255px, 0px) rotate(30deg);  }
/**** ARMS ****/
.arms:before,
.arms:after {
    background-color: #A5C63B;
    content: '';
    width: 75px;  
    height: 233px;
    top: -8px;
    position: absolute;
    border-radius: 40px 40px 40px 40px;  
}
.arms:before { left: -90px; }
.arms:after{ right: -90px; }
/**** EYES ****/
.eyes:before,
.eyes:after {
    background-color: #FFFFFF;
    content: '';
    width: 27px;  
    height: 27px;
    top: 68px;
    position: absolute;
    border-radius: 20px;
}
.eyes:before { left: 78px; }
.eyes:after{ right: 78px; }

11 comments

1. 

   chloe

   23 November 2012

   oh!
   goooooooooooooooooooood!

2. 

   toby

   26 July 2012

   It's very great!

3. 

   michael liu

   20 July 2012

   beautifull
   

4. 

   Monkey

   19 July 2012

   Nice job!!!

5. 

   dress

   18 July 2012

   beautifull.cool

6. 

   wanglixin

   15 July 2012

   Good Like It.

7. 

   Allen

   14 July 2012

   like it

8. 

   mark

   09 February 2012

   Coolest and codeiest thing nice one....

9. 

   Dr. Hak

   21 September 2011

   goed gedaan

10. 

    Mufid

    21 September 2011

    Cool!