Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating and Animating an Android Logo with CSS3

In this article, we will build an Android logo using HTML and CSS. Our logo will have some animation features as well

In this article, we will build an Android logo using HTML and CSS. Our logo will have some animation features as well.

We will make use of the transitional features of CSS3 to create the logo.

Our final logo will look something like this, due to obvious reasons I will not be able to show the animation aspect in this picture itself.

Figure 1. The desired Android logo

1. Writing the HTML code

The HTML code for this application is quite simple, involving the use of numerous divs, to provide the different body sections for our given logo. We will start by creating our parent div which is called “android”, and then we will create two more divs inside of the parent div, we will call them head and body respectively.

2. Creating the head

The head will basically entail the face of the logo and the body will entail the rest of the body, i.e. the arms, legs, etc.

Our face has two antennas attached to the skull of our logo, we will create them using two different divs, which are l_ant and r_ant respectively,

And our face will also contain the eyes of the logo, which we define by the divs, l_eye, and r_eye respectively.

The code for our HTML page is in Listing 1.

Listing 1. HTML code

			Android Logo

		<div class="android">
			<div class="head">
				<div class="l_ant"></div>
				<div class="r_ant"></div>
				<div class="l_eye"></div>
				<div class="r_eye"></div>
			<div class="body">
				<div class="l_arm"></div>
				<div class="r_arm"></div>
				<div class="l_leg"></div>
				<div class="r_leg"></div>

As you can see, we made use of eight divs in total, four for head, and four for the body.

3. Creating the body

To create the body, we will divide the body into arms, legs and the rest of the abdomen, our parent div here is the div, which initially contains all the three different parts,

We divide it by creating separate code for the hands and the legs.

Now our left arm is given the name, l_arm, and our right arm is given the name, r_arm.

We will later use CSS to give them the shape we see in the photo, and realize how this seemingly complex code can easily be implemented.

Finally, we end our HTML code and move over to CSS, which brings us to the major part of this code.

Before we move further, we need to know the use of divs, and why we have chosen them from all the other HTML elements.

We did that because the divs are the basic elements of any HTML document and with the help of them, we can create an empty box and give it whichever shape we like, no other element in HTML provides us with this thing.

4. Writing the CSS code

To write the CSS code, we will take a top-down approach, where we first set the parent divs, and then sequentially move to all the other elements.

Starting with “android”:

We have defined our parent div as the member of class android,

We could have defined it as an id too, because this name will be given to just this element, i.e., the parent div.

Note: Even before setting the parent divs, we need to give some properties that should be common to all the elements of our HTML code.

It is given by:

div {
    margin: 0;
    padding: 0;
div div {
    background: #A4CA39;
    position: relative;

By setting the margin and the padding, we mean that the spaces between the elements and the spaces of the elements inside of our div is 0.

By using the given hex code, we get a light green color as our background.

Lastly, relative positioning means that the position of the divs, when we create one, or all the properties of the divs, like the margins, etc., will be set with respect to the normal position of the div, where it would have been placed otherwise.

We need to note that the above properties will be overwritten when we set a different property for our element after we define the properties of the particular class to which it belongs,

These are basically used so as to give a common property which need not be defined every time we are writing the properties of a particular div.

Now for our parent class, we set the following property in Listing 2.

Listing 2. Code for parent class

.android {
    height: 404px;
    width: 334px;
    margin: 100px auto;

By writing this, we set the height of our parent class to 404px and width to 334px.

Further by keeping the margin as 100px auto, we create a space of 100px from the 4 borders of the page of the logo, because our logo isn’t relative to any other parent div.

Note: All the height and width measurements for the logo are calculated in accordance with the original logo, in case the readers are wondering about the measurements.

After it, we move forward to our head part of the logo:

5. Stylizing the head

The head will be stylized by using the following code in Listing 3.

Listing 3. CSS code for heading

.head {
    width: 220px;
    height: 100px;
    top: 32px;
    border-radius: 110px 110px 0 0;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
    -webkit-transition: all 0.1s ease-in;

As we can see the height and width properties can be understood intuitively.

By setting top:32px, we move our head 32px above its normal position, i.e., the position where it otherwise would have been placed.

By giving the border radius, we are setting the radius with respect to the center of the 4 corners of our divs, we give it in such a way that our logo looks like the original one. We have set it in 4 different ways, we have done that so as to avoid any irregularities when we run the code on different platforms like mozilla firefox, etc.

By now, we can already see the bulge of the head on our screen as shown in Figure 2.

Figure 2. Initial head

Next thing we need to do is stylize the 4 divs inside of our head div,

The coding for the left and the right part will almost be the same, except for the positional changes of course.

The code to stylize the eyes is as given in Listing 4.

Listing 4. Code for eyes

.r_eye {
    background: #fff;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 42px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
.l_eye {
    left: 50px;
.r_eye {
    right: 50px;

We have set the background color of the eyes to plain white and set the same height and width to make a square that gives us the ease to use a single value when writing the border radius to 10px, which finally gives us a perfect circle.

We have separately set the left eye and right eye to a position of 50 px left and right from the position where they otherwise would have been placed.

At the end, we get two circles spaced equally apart as in Figure 3.

Figure 3. Head with eyes.

Now to further create the antennas on the head of the logo, we have a bit of common code for the left antenna and the right antenna as follows in Listing 5.

Listing 5. Code for Antennas

.r_ant {
    width: 6px;
    height: 50px;
    position: absolute;
    top: -34px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;

The height and width are appropriately set, and absolute positioning is used, which basically means, positioning the logo with respect to the parent div, which in our case is head.

So, by giving it a value of -34px, we have given a negative distance, thus rendering our antennas above the head of the logo.

We will change the position of the two antennas in the next section.

To give the final touch, we need to write the following code shown in Listing 6.

Listing 6. Final Antenna Code

.l_ant {
    left: 50px;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
.r_ant {
    right: 50px;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);

By using left and right, we set the position of our logo 50 pixels to the left and the right of the head respectively.

Finally, to rotate the antennas, we use the transform property, where our center will be the hinge.

This will finally complete the head part of the android logo, and give us an aesthetically pleasing replica of the original logo.

As already explained, the property is written in many different ways so that the logo works properly on different platforms,

You can also work by writing just the transform type.

Figure 4. Head along with antennas

This is how our logo will finally look (Figure 4).

6. Stylizing the body

To do that, we will need to write the following code in Listing 7.

Listing 7. Code for stylizing the body

.body {
    width: 220px;
    height: 184px;
    top: 40px;
    border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;

As we already know by now, the given code will set the height and width, give a relative positioning of 40px and border radius of 25px to the two lower edges.

This is how our logo will look now:

Figure 5. Logo after creating the body

All we need to do now is create the hand and the legs.

This will be done in a similar manner to the head, we will give the properties that are common to both the hands and both the legs, and then we will give the positioning separately to place them properly.

Here is the code to do that:

There are a few properties which are common for all all the hands and the legs, these can be written as Listing 8.

Listing 8. Code common to hands and legs

.r_leg {
    width: 50px;
    position: absolute;
    -webkit-transition: all 0.1s ease-in;

This means they will have the common width and an absolute positioning, which will help us to place them at the exact distance at which we want them placed.

Now we will write the properties common to both the hands, they are given by Listing 9.

Listing 9. Code for both the hands

.r_arm {
    height: 150px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;

This can intuitively be understood by looking at it.

The height and the border-radius have been set to 150px and 20px each.

Finally, we will give the positioning of the hands separately as:

.l_arm {
    left: -58px;
.r_arm {
    right: -58px;

This will look like Figure 6.

Figure 6. Logo along with hands

The rest of it is just a cup of cake. We need to create the legs of the logo and it can be done as shown in Listing 10.

Listing 10. Code for the legs

.r_leg {
    height: 80px;
    top: 182px;
    border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;

These are the common properties for both the legs,

Again, to mention, we have used different formats for writing the same properties so that they can be used on different platforms.

The positions of the two arms different. Let’s see the code for this:

.l_leg {
    left: 45px;
.r_leg {
    right: 45px;

This finally gives us the following logo shown in Figure 7.

Figure 7. Final logo without animation

The only part now left is giving the animation effects to the logo; it is quite easy in comparison to what we have achieved thus far.

7. Animating the logo

The only part of the logo that will be animated includes the arms and the antennas over the head.

They are quite easy to animate. It is done with the help of the advance features of the CSS3, it was not possible when CSS didn’t have the animation features.

To do that, we will need to use Pseudo classes.

The concept of Pseudo classes is quite simple, it makes a class specialized for a particular property and for that particular property only, it is not suggested to include any other property. To declare a pseudo class, we write the name of the identifier followed by a ‘:’.

Therefore, the code to create a pseudo class to animate the left hand will be the one shown in Listing 11.

Listing 11. Code for animating the left hand

.l_arm:hover {
    -webkit-transform: rotate(15deg) translate(-14px, 0);
    -transform: rotate(15deg) translate(-14px, 0);
    -moz-transform: rotate(15deg) translate(-14px, 0);

Now, here, the transform property is again used, this time in conjunction with the translate property.

The rotate property is used to rotate our element, and the translate property will be used to translate our elements.

But when we use them together, they can be used to translate the element about a hinge,

Thus giving it an animation effect.

The arguments to the translate function are the coordinates where we want the element to finally go to.

Again, all the other formats are written so that the code is compatible with different platforms and browsers.

The animation will occur as follows in Figure 8.

Figure 8. Effect of animation

The right arm can be translated in a similar manner; we will just need to change the angle and the position for the rotation and the translation function respectively.

The code is as follows in Listing 12.

Listing 12. Code for animating the right hand

.r_arm:hover {
	-webkit-transform: rotate(-30deg) translate(30px, 0);
    -transform: rotate(-30deg) translate(30px, 0);
    -moz-transform: rotate(-30deg) translate(30px, 0);

Since this time we are moving anti-clockwise, the angle is negative.

To get the exact final location for the right arm, you can use hit and trial or can search for it on the Internet like I did.

Finally, the only thing left to be animated is our head, It can be done as in Listing 13.

Listing 13. Code for animating head

.head:hover {
    -webkit-transform: rotate(-5deg) translate(-4px, -8px);
    -transform: rotate(-5deg) translate(-4px, -8px);
    -moz-transform: rotate(-5deg) translate(-4px, -8px);

That means, this was done in just the same manner as the arms but the only thing changing is the angle of rotation and the position of translation, which is different for all the three elements.


Finally, the logo will look like this, when you hover your mouse over the head of the logo, just like we see in Figure 9.

Figure 9. Logo with animated head

This tutorial thus taught you how to draw a seemingly complex figure using just basic CSS and HTML.

CODING is my Passion first, hobby second and job third! I am Full Stack Developer from last two years and I love building scalable web applications and modern websites with new technologies.I started with my web development with ...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login