Membuat Logo Android dengan Css3

membuat logo

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.
oke, itulah sedikit deskripsi mengenai Android. dan berikut ini adalah cara membuat  logo Android murni dengan Css3 tanpa menggunakan software apapun!
ok Langsung saja ya, make a practice is a better way to take Action!
Kode Css Android:

#android_eye_left {
    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;
}
Kode HTML nya adalah sebagai berikut:

<div id="android_container">
<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>
Hasil Akhir dari logo android adalah seperti dibawah ini


is
home