Android robot in 100% pure CSS

20 September 2011

Try it yourself on JSfiddle.netThe 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; }
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

12 comments

Previous Page 1 of 2 Next
  1. Johan van Tongeren Gravatar

    Satya Prakash

    29 October 2013

    Only 2 antenas are not visible in IE9. One antena is misplaced.

  2. Johan van Tongeren Gravatar

    chloe

    23 November 2012

    oh!
    goooooooooooooooooooood!

  3. Johan van Tongeren Gravatar

    toby

    26 July 2012

    It's very great!

  4. Johan van Tongeren Gravatar

    michael liu

    20 July 2012

    beautifull

  5. Johan van Tongeren Gravatar

    Monkey

    19 July 2012

    Nice job!!!

  6. Johan van Tongeren Gravatar

    dress

    18 July 2012

    beautifull.cool

  7. Johan van Tongeren Gravatar

    wanglixin

    15 July 2012

    Good Like It.

  8. Johan van Tongeren Gravatar

    Allen

    14 July 2012

    like it

  9. Johan van Tongeren Gravatar

    mark

    09 February 2012

    Coolest and codeiest thing nice one....

  10. Johan van Tongeren Gravatar

    Dr. Hak

    21 September 2011

    goed gedaan

Previous Page 1 of 2 Next