CSS3に準拠したモダンブラウザで見ることが出来る。
CSS3に対応できていないInternet Explorer 8、7、6での表示はお察しください。
Firefox、Chrome、Internet Explorer 9で表示を確認しました。
なお、: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;を適用したタグを挿入してください。
