Cara membuat Logo Android dengan css
Android adalah sebuah sistem operasi yang dirancang secara khusus untuk perangkat seluler yang berbasis smartphone dan computer tablet, Android resmi menjadi milik Google sejak tahun 2005. pengguna Android dapat mendownload dan menginstal berbagai macam aplikasi yang tersedia di Google Play.
ok Langsung saja ya, make a practice is a better way to take Action!
Kode Css Android:
#android_eye_left {Kode HTML nya adalah sebagai berikut:
position: relative;
top: 50px;
left: 40px;
background: #fff;
height: 20px;
width: 20px;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
}
#android_eye_right {
position: relative;
top: 30px;
left: 140px;
background: #fff;
height: 20px;
width: 20px;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
}
#android_antenna_left {
position: relative;
top: 35px;
left: 100px;
background: #95c03b;
height: 50px;
width: 7px;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
-moz-transform:rotate(150deg);
-webkit-transform:rotate(150deg);
float:left;
}
#android_antenna_right {
position: relative;
top: 35px;
left: 210px;
background: #95c03b;
height: 50px;
width: 7px;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
float:left;
}
#android_head {
background: #95c03b;
height: 100px;
width: 200px;
-webkit-border-radius: 1.0em 1.0em 0 0;
-moz-border-radius: 1.0em 1.0em 0 0;
border-radius: 6.0em 6.0em 0 0;
margin: 15px 0 15px 65px;
}
#android_body {
background: #95c03b;
height: 200px;
width: 200px;
-webkit-border-radius: 0 0 1.0em 1.0em;
-moz-border-radius: 0 0 1.0em 1.0em;
border-radius: 0 0 1.0em 1.0em;
float: left;
margin: 0 15px;
}
#android_hand_left {
background: #95c03b;
height: 150px;
width: 50px;
float: left;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
}
#android_hand_right {
background: #95c03b;
height: 150px;
width: 50px;
float: left;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
}
#android_leg_left {
background: #95c03b;
height: 80px;
width: 50px;
float: left;
margin-left: 95px;
-webkit-border-radius: 0 0 1.5em 1.5em;
-moz-border-radius: 0 0 1.5em 1.5em;
border-radius: 0 0 1.5em 1.5em;
}
#android_leg_right {
background: #95c03b;
height: 80px;
width: 50px;
float: left;
margin-left: 40px;
-webkit-border-radius: 0 0 1.5em 1.5em;
-moz-border-radius: 0 0 1.5em 1.5em;
border-radius: 0 0 1.5em 1.5em;
}
.clear {
clear: both;
}
<div id="android_container">Hasil Akhir dari logo android adalah seperti dibawah ini
<div id="android_antenna">
<div id="android_antenna_left" class="part"></div>is
<div id="android_antenna_right" class="part"></div>
<div class="clear"></div>
</div>
<div id="android_head">
<div id="android_eye_left"></div>
<div id="android_eye_right"></div>
</div>
<div id="android_body_main">
<div id="android_hand_left" class="part"></div>
<div id="android_body" class="part"></div>
<div id="android_hand_right" class="part"></div>
<div class="clear"></div>
</div>
<div id="android_leg">
<div id="android_leg_left" class="part"></div>
<div id="android_leg_right" class="part"></div>
<div class="clear"></div>
</div>
</div>