Finn el humano con HTML y CSS

Por Alexander Guevara Benites
Finn el humano con HTML y CSS

Acompáñanos a crear a Finn, el humano de "Hora de aventura" con HTML y CSS

¿Conoces a Finn, el humano de la popular serie “Hora de Aventura”? En esta oportunidad aprenderemos a crearlo utilizando HTML y CSS. ¡Prepara tu editor favorito y comencemos con este tutorial!

Empezaremos creando algunos divs en HTML, los cuales nos ayudarán a dibujar a Finn. En un contenedor colocaremos todos los divs con las partes que formarán el cuerpo de Finn, lo ponemos dentro de usaremos este contenedor para poder manipularlo con facilidad y no tener problemas en caso la resolución del dispositivo cambiara. Este div tendrá la clase “contenedor”, luego utilizaremos dos divs que tendrán las clases “cabeza” y “pecho”, y les daremos algunas propiedades CSS que nos ayudarán a darle forma a Finn.

Estas clases deben tener un ancho, alto y color de fondo, además a las clases cabeza y pecho les daremos las propiedades top y left, que nos ayudarán a posicionarlas en el lugar que queremos; ambas tendrán una posición relativa, quedando de la siguiente manera:


Luego, utilizando las pseudoclases before y after vamos a crear las orejas del gorro de Finn, para lo cual tendremos cabeza::before y  cabeza::after, ambas con propiedades muy similares, variando solo en la propiedad left con la que ubicaremos las orejas en la posición deseada, quedándonos de la siguiente manera:


Ahora crearemos la cara de Finn. Dentro del div cabeza vamos a escribir un div class cara, luego en CSS, vamos a darle propiedades a esta para que sea de forma ovalada. Dentro del div cara vamos a tener otro div con la clase detalles con el que vamos a crear los ojos y la boca.

En nuestro CSS, en la clase cara, usaremos la propiedad z-index: 1 para no tener problemas con la clase cabeza::after, ya que si no usamos esta propiedad una de las orejas aparecerá encima de la cara. Para dibujar los ojos, vamos a darle propiedades similares a las clases detalles, detalles::before y para la boca trabajaremos con la clase detalles::after. Aquí trabajaremos con los bordes para crear la boca y utilizaremos bordes-radius para darle una sonrisa y con border-color haremos que el borde inferior tenga un color negro y el resto será transparente, quedándonos de la siguiente manera:


Para finalizar, vamos a crear las mangas y brazos de Finn. Dentro del div con la clase 


¡Y ya tenemos a Finn, el humano ,creado!

Con este tutorial hemos puesto en práctica lo que hemos aprendido en la plataforma. Recuerda que en DevCode contamos con una amplia variedad de cursos que complementarán tu aprendizaje. Entra a devcode.la/cursos, y no olvides registrarte de manera gratuita. Si tienes consultas, no dudes en dejarlas en los comentario, comparte este tutorial con tus amigos y ayúdanos a hacer crecer esta comunidad.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Alexander Guevara Benites

Alexander Guevara Benites

Nymeria's father | Designer 3D | Pokemon Master | Videogame Lover