[Pure CSS] Android Robot

以下のAndroid RobotはHTML/CSSのみで書かれている。
CSS3に準拠したモダンブラウザで見ることが出来る。
CSS3に対応できていないInternet Explorer 8、7、6での表示はお察しください。
Firefox、Chrome、Internet Explorer 9で表示を確認しました。

:before、:afterを利用し、簡素に書く方法もあるが、ここではわかり易さを重視する。
なお、:before、:afterを利用したAndroid Robotはこのサイトで利用しています。
需要があれば:before、:afterを利用したPure CSSも公開します。

HTML

<div class='androidrobot'>
  <div class='head'></div>
  <div class='body'></div>
  <div class='antenna'>
    <div class='left'></div>
    <div class='right'></div>
  </div>
  <div class='arm'>
    <div class='left'></div>
    <div class='right'></div>
  </div>
  <div class='leg'>
    <div class='left'></div>
    <div class='right'></div>
  </div>
  <div class="eye">
    <div class='left'></div>
    <div class='right'></div>
  </div>
</div>

CSS

.androidrobot{
  height:118px;
  padding-top:7px;
  position: relative;
  width:106px;
}
.androidrobot .head, .androidrobot .body, .androidrobot .antenna *, .androidrobot .arm *, .androidrobot .leg *{
  background-color: #A4C639;
}
.androidrobot .head, .androidrobot .body{
  margin-left:19px;
  width: 68px;
}
.androidrobot .head{
  -moz-border-radius-topleft:50% 100%;
  -moz-border-radius-topright:50% 100%;
  -webkit-border-top-left-radius:50% 100%;
  -webkit-border-top-right-radius:50% 100%;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  height: 32px;
}
.androidrobot .body{
  -moz-border-radius-bottomleft:8px;
  -moz-border-radius-bottomright:8px;
  -webkit-border-radius-bottomleft:8px;
  -webkit-border-radius-bottomright:8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  height: 58px;
  margin-top: 3px;
}
.androidrobot .antenna *, .androidrobot .arm *, .androidrobot .leg *{
  position: absolute;
}
.androidrobot .antenna *{
  -moz-border-radius-topleft:50% 2px;
  -moz-border-radius-topright:50% 2px;
  -moz-transform-origin:50% 0;
  -ms-transform-origin:50% 0;
  -webkit-border-top-left-radius:50% 2px;
  -webkit-border-top-right-radius:50% 2px;
  -webkit-transform-origin:50% 0;
  border-top-left-radius:50% 2px;
  border-top-right-radius:50% 2px;
  height: 14px;
  top:0;
  transform-origin:50% 0;
  width: 4px;
}
.androidrobot .antenna .left{
  -moz-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  -webkit-transform:rotate(-30deg);
  left:29px;
  transform:rotate(-30deg);
}
.androidrobot .antenna .right{
  -moz-transform:rotate(30deg);
  -ms-transform:rotate(30deg);
  -webkit-transform:rotate(30deg);
  right:29px;
  transform:rotate(30deg);
}
.androidrobot .eye *{
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  background-color: #FFFFFF;
  border-radius:50%;
  height: 6px;
  position:absolute;
  top:21px;
  width: 6px;
}
.androidrobot .eye .left{
  left:34px;
}
.androidrobot .eye .right{
  left:66px;
}
.androidrobot .arm *, .androidrobot .leg *{
  width:16px;
}
.androidrobot .arm *{
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  height:47px;
  top:37px;
}
.androidrobot .arm .right{
  left: 90px;
}
.androidrobot .leg *{
  -moz-border-radius-bottomleft:8px;
  -moz-border-radius-bottomright:8px;
  -webkit-border-radius-bottomleft:8px;
  -webkit-border-radius-bottomright:8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  height:25px;
}
.androidrobot .leg .left{
  left:34px;
}
.androidrobot .leg .right{
  left:56px;
}

.arm>.left、.arm>.rightに対しtransform-originで回転の起点を指定、transformによりrotateを適用する事で、腕の上げ下げも可能。
ボックスから腕がはみ出たりする場合は、.androidrobotのpaddingを調整してください。
.eyeのleftを調整したり、.antennaのleft、transformを調整する事で顔を回転させたように見せることも可能。
ロゴに文字を回り込ませる場合は、.androidrobotにfloat:left;等を指定してください。
float:left;を指定したうえで回り込みを解除する場合は、clear:both;を適用したタグを挿入してください。