Creating Basic Android Logo With CSS

CSS3 bring us more advanced feature to styling the html element, this sort example show how to create a very basic android logo based on CSS. It must be very easy to create it, if I sketch it may look something like this picture below.

Yup all with div element, we just have to manipulating the width, height, background color, rounded corner, position and the angle for the antenna part. I am not explaining and not showing the screen capturen since we all already familiar with android, by the way here are the demo and the source code.

View Demo

The HTML

<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>

The CSS

#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;
}

View Demo