[CSS][BASICO] Creando el robot (logo) de Android.

neod0g · Julio 30, 2013, 01:44:03 AM

Hola a todos, le 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 creando 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: html5

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

WHK · Julio 31, 2013, 03:18:01 PM

Está bueno

también puedes usar SVG para vectorizar el logo de Android y pegarlo en la pagina web.

Acidkode · Julio 31, 2013, 04:29:17 PM

como nota: aquí la mona lisa en css No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

rominperz1 · Septiembre 30, 2013, 07:44:04 PM

Muy bueno me quedó lo acabo de probar gracias.
Voy a ver si me sale un corazón rojo en CSS, y si me sale lo postearé aquí al código.
Saludos

[CSS][BASICO] Creando el robot (logo) de Android.

neod0g

Julio 30, 2013, 01:44:03 AM Ultima modificación: Agosto 12, 2013, 06:32:06 PM por Destructor.php

WHK

Julio 31, 2013, 03:18:01 PM #1

Acidkode

Julio 31, 2013, 04:29:17 PM #2

rominperz1

Septiembre 30, 2013, 07:44:04 PM #3