Skip to content

Instantly share code, notes, and snippets.

@yuki24
Created November 3, 2010 12:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yuki24/661012 to your computer and use it in GitHub Desktop.
Save yuki24/661012 to your computer and use it in GitHub Desktop.
I just wrote the droid only in CSS3.
body {
background: #30587c;
}
.white_border {
border: #fff solid 10px;
}
.left_horn_bg {
width: 26px;
height: 70px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
position: absolute;
top: 80px;
left: 300px;
background: #fff;
}
.right_horn_bg {
width: 26px;
height: 70px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
position: absolute;
top: 80px;
left: 394px;
background: #fff;
}
.left_horn {
width: 6px;
height: 70px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
position: absolute;
top: 90px;
left: 315px;
background: #96d300;
}
.right_horn {
width: 6px;
height: 70px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
position: absolute;
top: 90px;
left: 398px;
background: #96d300;
}
.head {
width: 200px;
height: 80px;
-moz-border-radius-topleft:100px;
-moz-border-radius-topright:100px;
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
border-radius-topleft:100px;
border-radius-topright:100px;
position: absolute;
top: 110px;
left: 250px;
background: #96d300;
}
.left_eye {
width: 18px;
height: 18px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
position: absolute;
top: 150px;
left: 310px;
background: #fff;
}
.right_eye {
width: 18px;
height: 18px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
position: absolute;
top: 150px;
left: 392px;
background: #fff;
}
.left_hand {
width: 50px;
height: 170px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
position: absolute;
top: 200px;
left: 190px;
background: #96d300;
}
.right_hand {
width: 50px;
height: 170px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
position: absolute;
top: 200px;
left: 460px;
background: #96d300;
}
.body {
width: 200px;
height: 210px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:25px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-bottom-right-radius:25px;
border-radius-bottomleft:25px;
border-radius-bottomright:25px;
position: absolute;
top: 200px;
left: 250px;
background: #96d300;
}
.left_foot {
width: 40px;
height: 130px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
position: absolute;
top: 360px;
left: 300px;
background: #96d300;
}
.right_foot {
width: 40px;
height: 130px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
position: absolute;
top: 360px;
left: 380px;
background: #96d300;
}
.white_r_foot_bg {
width: 60px;
height: 130px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
position: absolute;
top: 370px;
left: 370px;
background: #fff;
}
.white_l_foot_bg {
width: 60px;
height: 130px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
position: absolute;
top: 370px;
left: 290px;
background: #fff;
}
.a {
width: 30px;
height: 30px;
border: #fff solid 10px;
-moz-border-radius-bottomleft:40px;
-moz-border-radius-topleft:40px;
-webkit-border-bottom-left-radius:40px;
-webkit-border-top-left-radius:40px;
border-radius-bottomleft:40px;
border-radius-topleft:40px;
position: absolute;
top: 550px;
left: 180px;
}
.a_bg {
width: 10px;
height: 10px;
background: #30587c;
position: absolute;
top: 590px;
left: 210px;
}
.n {
width: 30px;
height: 40px;
border-top: #fff solid 10px;
border-right: #fff solid 10px;
border-left: #fff solid 10px;
-moz-border-radius-topleft:50px;
-moz-border-radius-topright:50px;
-webkit-border-top-left-radius:50px;
-webkit-border-top-right-radius:50px;
border-radius-topleft:50px;
border-radius-topright:50px;
position: absolute;
top: 550px;
left: 240px;
}
.d {
width: 40px;
height: 30px;
border-top: #fff solid 10px;
border-right: #fff solid 10px;
border-bottom: #fff solid 10px;
-moz-border-radius-bottomright:50px;
-moz-border-radius-topright:50px;
-webkit-border-bottom-right-radius:50px;
-webkit-border-top-right-radius:50px;
border-radius-bottomright:50px;
border-radius-topright:50px;
}
.d1 {
position: absolute;
top: 550px;
left: 300px;
}
.d2 {
position: absolute;
top: 550px;
left: 490px;
}
.r_top {
width: 30px;
height: 15px;
border-top: #fff solid 10px;
border-right: #fff solid 10px;
border-bottom: #fff solid 10px;
-moz-border-radius-bottomright:50px;
-moz-border-radius-topright:50px;
-webkit-border-bottom-right-radius:50px;
-webkit-border-top-right-radius:50px;
border-radius-bottomright:50px;
border-radius-topright:50px;
position: absolute;
top: 550px;
left: 360px;
}
.r_bottom {
width: 30px;
height: 15px;
border-top: #fff solid 10px;
border-right: #fff solid 10px;
-moz-border-radius-topright:50px;
-webkit-border-top-right-radius:50px;
border-radius-topright:50px;
position: absolute;
top: 575px;
left: 360px;
}
.o {
width: 30px;
height: 30px;
border: #fff solid 10px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
position: absolute;
top: 550px;
left: 410px;
}
.i {
width: 10px;
height: 50px;
position: absolute;
top: 550px;
left: 470px;
background: #fff;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="android_in.css" />
</head>
<body>
<div class="left_horn_bg"></div>
<div class="right_horn_bg"></div>
<div class="white_border head"></div>
<div class="left_horn"></div>
<div class="right_horn"></div>
<div class="left_eye"></div>
<div class="right_eye"></div>
<div class="white_border left_hand"></div>
<div class="white_border right_hand"></div>
<div class="white_r_foot_bg"></div>
<div class="white_l_foot_bg"></div>
<div class="white_border body"></div>
<div class="left_foot"></div>
<div class="right_foot"></div>
<div class="a"></div>
<div class="a_bg"></div>
<div class="n"></div>
<div class="d d1"></div>
<div class="r_top"></div>
<div class="r_bottom"></div>
<div class="o"></div>
<div class="i"></div>
<div class="d d2"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment