[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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108

.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;を適用したタグを挿入してください。