comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

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

  • 3 Respuestas
  • 2095 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado neod0g

  • *
  • Underc0der
  • Mensajes: 2
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • WebeoLabs
    • Email
« en: 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
  1. <link rel="stylesheet" href="android.css">
  2. <div id="android">
  3.  <div id="antena">
  4.  <div id="antena_izquierda"> </div>
  5.  <div id="antena_derecha"> </div>
  6.  </div>
  7.  <div id="cabeza">
  8.  <div id="ojo_izquierdo"> </div>
  9.  <div id="ojo_derecho"> </div>
  10.  </div>
  11.  <div id="cuerpo_superior">
  12.  <div id="brazo_izquierdo"> </div>
  13.  <div id="tronco"> </div>
  14.  <div id="brazo_derecho"> </div>
  15.  </div>
  16.  <div id="cuerpo_inferior">
  17.  <div id="pierna_izquierda"> </div>
  18.  <div id="pierna_derecha"> </div>
  19.  </div>
  20.  </div>
  21.  
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
  1. #antena_izquierda, #antena_derecha, #cabeza, #brazo_izquierdo, #tronco, #brazo_derecho, #pierna_izquierda, #pierna_derecha {
  2.  background-color: #a4c739;
  3.  }
  4.  
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
  1. #cabeza
  2. width: 400px;
  3.  margin: 0 auto;
  4.  height: 200px;
  5.  border-radius: 200px 200px 0 0;
  6.  -webkit-border-radius: 200px 200px 0 0;
  7.  -moz-border-radius: 200px 200px 0 0;
  8.  -ms-border-radius: 200px 200px 0 0;
  9.  -o-border-radius: 200px 200px 0 0;
  10.  margin-bottom: 10px;
  11.  }
  12.  
  13. #cuerpo_superior {
  14.  width: 700px;
  15.  height: 400px;
  16.  margin: 10px 525px 30px;
  17.  text-align: center;
  18.  }
  19.  
  20. #brazo_izquierdo, #brazo_derecho {
  21.  width: 100px;
  22.  height: 325px;
  23.  float: left;
  24.  border-radius: 100px;
  25.  -webkit-border-radius: 100px;
  26.  -moz-border-radius: 100px;
  27.  -ms-border-radius: 100px;
  28.  -o-border-radius: 100px;
  29.  }
  30.  
  31. #brazo_izquierdo {
  32.  margin-right: 10px;
  33.  margin-left: -10px;
  34.  }
  35.  
  36. #tronco {
  37.  width: 400px;
  38.  height: 400px;
  39.  float: left;
  40.  border-radius: 0 0 50px 50px;
  41.  -webkit-border-radius: 0 0 50px 50px;
  42.  -moz-border-radius: 0 0 50px 50px;
  43.  -ms-border-radius: 0 0 50px 50px;
  44.  -o-border-radius: 0 0 50px 50px;
  45.  margin-right: 10px;
  46.  }
  47.  
  48. #cuerpo_inferior {
  49.  width: 400px;
  50.  height: 200px;
  51.  margin: -30px 625px;
  52.  }
  53.  
  54. #pierna_izquierda, #pierna_derecha {
  55.  width: 100px;
  56.  height: 200px;
  57.  float: left;
  58.  border-radius: 0 0 100px 100px;
  59.  -webkit-border-radius: 0 0 100px 100px;
  60.  -moz-border-radius: 0 0 100px 100px;
  61.  -ms-border-radius: 0 0 100px 100px;
  62.  -o-border-radius: 0 0 100px 100px;
  63.  }
  64.  
  65. #pierna_izquierda {
  66.  margin-left: 75px;
  67.  }
  68.  
  69. #pierna_derecha {
  70.  margin-left: 50px;
  71.  }
  72.  
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
  1. #ojo_izquierdo, #ojo_derecho {
  2.  width: 30px;
  3.  height: 30px;
  4.  border-radius: 15px;
  5.  -webkit-border-radius: 15px;
  6.  -moz-border-radius: 15px;
  7.  -ms-border-radius: 15px;
  8.  -o-border-radius: 15px;
  9.  background-color: white;
  10.  float: left;
  11.  }
  12.  
  13. #ojo_izquierdo {
  14.  position: relative;
  15.  top: 100px;
  16.  left: 90px;
  17.  }
  18.  
  19. #ojo_derecho {
  20.  position: relative;
  21.  top: 100px;
  22.  left: 250px;
  23.  }
  24.  
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
  1. #antena {
  2.  width: 400px;
  3.  height: 100px;
  4.  margin: 0 auto;
  5.  }
  6.  
  7. #antena_izquierda, #antena_derecha {
  8.  width: 10px;
  9.  height: 100px;
  10.  border-radius: 10px;
  11.  -webkit-border-radius: 10px;
  12.  -moz-border-radius: 10px;
  13.  -ms-border-radius: 10px;
  14.  -o-border-radius: 10px;
  15.  float: left;
  16.  }
  17.  
  18. #antena_izquierda {
  19.  position: relative;
  20.  top: 40px;
  21.  left: 70px;
  22.  transform:rotate(-33deg);
  23.  -webkit-transform: rotate(-33deg);
  24.  -moz-transform: rotate(-33deg);
  25.  -ms-transform: rotate(-33deg);
  26.  -o-transform: rotate(-33deg);
  27.  }
  28.  
  29. #antena_derecha {
  30.  position: relative;
  31.  top: 40px;
  32.  left: 310px;
  33.  transform: rotate(33deg);
  34.  -webkit-transform: rotate(33deg);
  35.  -moz-transform: rotate(33deg);
  36.  -ms-transform: rotate(33deg);
  37.  -o-transform: rotate(33deg);
  38.  }
  39.  
  40.  
Con todo esto, ya podemos ver nuestro resultado en el navegador. Si todo salio correcto el resultado de su androide debería ser esto:

« Última modificación: Agosto 12, 2013, 06:32:06 pm por Destructor.php »
Escrutando hondo en aquella oscuridad permanecí largo rato, atónito, temeroso, dudando, soñando sueños que ningún mortal
se haya atrevido jamás a soñar. - Edgar Allan Poe

Desconectado WHK

  • *
  • Underc0der
  • Mensajes: 68
  • Actividad:
    0%
  • Reputación 3
  • 吴阿卡
    • Ver Perfil
    • WHK
« Respuesta #1 en: Julio 31, 2013, 03:18:01 pm »
Está bueno :P también puedes usar SVG para vectorizar el logo de Android y pegarlo en la pagina web.

Desconectado Acidkode

  • *
  • Underc0der
  • Mensajes: 43
  • Actividad:
    0%
  • Reputación 0
  • 1f u c4n r34d th1s u r34lly n33d t0 g37 l41d
    • Ver Perfil
    • Email
« Respuesta #2 en: Julio 31, 2013, 04:29:17 pm »
como nota: aquí la mona lisa en css http://codepen.io/jaysalvat/pen/HaqBf


Desconectado rominperz1

  • *
  • Underc0der
  • Mensajes: 1
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
« Respuesta #3 en: 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
Un poco de todo sobre diseño web monterrey

 

¿Te gustó el post? COMPARTILO!



[JavaScript][BASICO] Videocurso de JavaScript

Iniciado por NewRadius

Respuestas: 1
Vistas: 1323
Último mensaje Enero 03, 2013, 09:31:12 pm
por DGadiiel
[HTML][BASICO] Primeros pasos en HTML

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1195
Último mensaje Febrero 24, 2010, 11:53:11 am
por ANTRAX
[HTML][BASICO] Script ''Haga desfilar un texto mediante la etiqueta <marquee>''

Iniciado por ANTRAX

Respuestas: 0
Vistas: 994
Último mensaje Febrero 24, 2010, 11:15:37 am
por ANTRAX
[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

Respuestas: 0
Vistas: 1126
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[HTML][BASICO] Script para que no se pueda copiar una imagen

Iniciado por Pa531no5

Respuestas: 0
Vistas: 1052
Último mensaje Abril 16, 2010, 11:21:13 am
por Pa531no5