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!

39 comments

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

    Pharme173

    12 August 2015

    Very nice site!

  2. Johan van Tongeren Gravatar

    Pharme649

    12 August 2015

    Very nice site! [url=http://oieapxy2.com/tyaaxt/2.html]cheap goods[/url]

  3. Johan van Tongeren Gravatar

    Pharmd835

    12 August 2015

    Very nice site! <a href="http://oieapxy2.com/tyaaxt/1.html">cheap goods</a>

  4. Johan van Tongeren Gravatar

    Pharme495

    11 August 2015

    Very nice site!

  5. Johan van Tongeren Gravatar

    Pharme155

    11 August 2015

    Very nice site! cheap goods http://yieapxo2.com/qoqssv/4.html

  6. Johan van Tongeren Gravatar

    Pharmc13

    11 August 2015

    Very nice site! [url=http://yieapxo2.com/qoqssv/2.html]cheap goods[/url]

  7. Johan van Tongeren Gravatar

    Pharmd15

    11 August 2015

    Very nice site! <a href="http://yieapxo2.com/qoqssv/1.html">cheap goods</a>

  8. Johan van Tongeren Gravatar

    Pharme173

    11 August 2015

    Very nice site!

  9. Johan van Tongeren Gravatar

    Pharmd924

    11 August 2015

    Very nice site! [url=http://aieypxo2.com/tovvas/2.html]cheap goods[/url]

  10. Johan van Tongeren Gravatar

    Pharme940

    11 August 2015

    Very nice site! <a href="http://aieypxo2.com/tovvas/1.html">cheap goods</a>

Previous Page 1 of 4 Next