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!

42 comments

Previous Page 1 of 5 Next
  1. Gravatar

    feng

    07 August 2017

    yes you are right

  2. Gravatar

    Smitha448

    04 September 2016

    Really informative article post.Thanks Again. Awesome. gddfdfdcaddkfkce

  3. Gravatar

    Smithb532

    01 September 2016

    We're a group of volunteers and starting a new scheme in our community. cgfbgefkfkfeggde

  4. Gravatar

    Pharme173

    12 August 2015

    Very nice site!

  5. Gravatar

    Pharme649

    12 August 2015

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

  6. Gravatar

    Pharmd835

    12 August 2015

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

  7. Gravatar

    Pharme495

    11 August 2015

    Very nice site!

  8. Gravatar

    Pharme155

    11 August 2015

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

  9. Gravatar

    Pharmc13

    11 August 2015

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

  10. Gravatar

    Pharmd15

    11 August 2015

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

Previous Page 1 of 5 Next