Creando el robot (logo) de Android

[neod0g]

Hola a todos, les saluda neod0g. Este es mi primer aporte en el foro(también en mi nuevo blog) espero les sirva y si tienen alguna duda (o crítica ) no duden en ponerlas!

Pues construir este pequeño robot (o androide como quieras llamarlo) puede ser un punto de partida para todos aquellos que quieran comenzar construyendo algo en CSS. En este tutorial utilizaré HTML básico y tener conocimientos intermedios de CSS es ideal, sin embargo los pasos son bastante sencillos a seguir para cualquier novato en el tema.

Primeramente, crearemos la estructura básica o cuerpo de el androide. aquí es donde usaremos elementos div de HTML. dividiremos nuestro Androide en secciones y asignaremos un div a cada una (Cabeza, cuerpo superior, cuerpo inferior)
código

Código HTML:

<link rel="stylesheet" href="android.css">
<div id="android">
 <div id="antena">
 <div id="antena_izquierda"> </div>
 <div id="antena_derecha"> </div>
 </div>
 <div id="cabeza">
 <div id="ojo_izquierdo"> </div>
 <div id="ojo_derecho"> </div>
 </div>
 <div id="cuerpo_superior">
 <div id="brazo_izquierdo"> </div>
 <div id="tronco"> </div>
 <div id="brazo_derecho"> </div>
 </div>
 <div id="cuerpo_inferior">
 <div id="pierna_izquierda"> </div>
 <div id="pierna_derecha"> </div>
 </div>
 </div>
 

Una vez puestos los elementos , crearemos el estilo con CSS.
El siguiente código dará a TODAS las partes del robot el color verde. A partir de aquí trabajaremos enteramente con el nuevo archivo android.css

Código CSS:

#antena_izquierda, #antena_derecha, #cabeza, #brazo_izquierdo, #tronco, #brazo_derecho, #pierna_izquierda, #pierna_derecha {
 background-color: #a4c739;
 }
 

Luego procedemos a darle estilo a las tres principales partes del cuerpo, usaremos la función border-radius, esto nos servirá para crear un semi circulo para los bordes de la cabeza. Como esta es una propiedad de CSS3 , tenemos que usar prefijos para hacerla compatible con otros navegadores. También usaremos la propiedad margin para darle espacio a cada parte de manera que exista una brecha entre brazos, tronco y cabeza.

Código CSS:

#cabeza
width: 400px;
 margin: 0 auto;
 height: 200px;
 border-radius: 200px 200px 0 0;
 -webkit-border-radius: 200px 200px 0 0;
 -moz-border-radius: 200px 200px 0 0;
 -ms-border-radius: 200px 200px 0 0;
 -o-border-radius: 200px 200px 0 0;
 margin-bottom: 10px;
 }
 
#cuerpo_superior {
 width: 700px;
 height: 400px;
 margin: 10px 525px 30px;
 text-align: center;
 }
 
#brazo_izquierdo, #brazo_derecho {
 width: 100px;
 height: 325px;
 float: left;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 -ms-border-radius: 100px;
 -o-border-radius: 100px;
 }
 
#brazo_izquierdo {
 margin-right: 10px;
 margin-left: -10px;
 }
 
#tronco {
 width: 400px;
 height: 400px;
 float: left;
 border-radius: 0 0 50px 50px;
 -webkit-border-radius: 0 0 50px 50px;
 -moz-border-radius: 0 0 50px 50px;
 -ms-border-radius: 0 0 50px 50px;
 -o-border-radius: 0 0 50px 50px;
 margin-right: 10px;
 }
 
#cuerpo_inferior {
 width: 400px;
 height: 200px;
 margin: -30px 625px;
 }
 
#pierna_izquierda, #pierna_derecha {
 width: 100px;
 height: 200px;
 float: left;
 border-radius: 0 0 100px 100px;
 -webkit-border-radius: 0 0 100px 100px;
 -moz-border-radius: 0 0 100px 100px;
 -ms-border-radius: 0 0 100px 100px;
 -o-border-radius: 0 0 100px 100px;
 }
 
#pierna_izquierda {
 margin-left: 75px;
 }
 
#pierna_derecha {
 margin-left: 50px;
 }
 

Con esto, tenemos la estructura basica(Y casi terminada) de nuestro androide. Hasta este punto debemos tener algo como esto:



Estando en la ultima parte de este tutorial, vamos a añadir las antenas y ojos. Para los ojos, usaremos nuevamente la propiedad border-radius que usamos para crear el cuerpo, también usaremos la propiedad position para posicionar los objetos correctamente.

Código CSS:

#ojo_izquierdo, #ojo_derecho {
 width: 30px;
 height: 30px;
 border-radius: 15px;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 -ms-border-radius: 15px;
 -o-border-radius: 15px;
 background-color: white;
 float: left;
 }
 
#ojo_izquierdo {
 position: relative;
 top: 100px;
 left: 90px;
 }
 
#ojo_derecho {
 position: relative;
 top: 100px;
 left: 250px;
 }
 

Para la antena, usaremos la función Transform. Esta propiedad tiene un sinfín de utilidades. Con CSS3, podemos usarla para rotar, escalar, sesgar o añadir perspectiva a tu imagen. Nuevamente, usamos position para que todo este en el lugar correcto.

Código CSS:

#antena {
 width: 400px;
 height: 100px;
 margin: 0 auto;
 }
 
#antena_izquierda, #antena_derecha {
 width: 10px;
 height: 100px;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 float: left;
 }
 
#antena_izquierda {
 position: relative;
 top: 40px;
 left: 70px;
 transform:rotate(-33deg);
 -webkit-transform: rotate(-33deg);
 -moz-transform: rotate(-33deg);
 -ms-transform: rotate(-33deg);
 -o-transform: rotate(-33deg);
 }
 
#antena_derecha {
 position: relative;
 top: 40px;
 left: 310px;
 transform: rotate(33deg);
 -webkit-transform: rotate(33deg);
 -moz-transform: rotate(33deg);
 -ms-transform: rotate(33deg);
 -o-transform: rotate(33deg);
 }
 

Con todo esto, ya podemos ver nuestro resultado en el navegador. Si todo salio correcto el resultado de su androide debería ser esto: