Dibujar en CSS: el pollo

Como prometimos en el artículo dibujar en css: formas, ¡hoy vamos a aprender a dibujar un pollo en CSS!

Si nos sigues desde hace tiempo habrás reconocido el pollo que dibujé para Semana Santa el año pasado, que está inspirado en una ilustración que encontré en Dribbble.

Comenzando: preparando tu cuerpo

Cuando dibujo en CSS, cada elemento visible es un div al que le vuelvo a dar estilo (o un :before/:after pero siempre de un div). Así que empezaremos de forma sencilla para nuestro HTML con sólo un div con clase pollo:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Chicken</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="chicken"></div></body></html>

Aquí nuestro div pollo simplemente servirá de envoltorio para el resto y no tendrá ningún estilo. Lo pondremos en posición: relativa para posicionar los otros elementos en relación a este. Y como en la mayoría de mis tutoriales vamos a estilizar el cuerpo para centrar nuestro diseño pasando por un display: ¡flex!!!

body {background-color: #00bcd4;display: flex;justify-content: center;align-items: center;height: 100vh;}.chicken {position: relative;}

Ahora que la base está puesta, podremos ponernos manos a la obra y empezar a dibujar nuestro pollo. Añade un div con la clase body en tu div de pollo. Y para responder a uno de los grandes misterios del universo: «¿El huevo o la gallina? En realidad, esta pregunta no tiene sentido porque la gallina ES un huevo. Así que como cuerpo vamos a dibujar una forma de huevo:

.body {width: 150px;height: 170px;background-color: #fff;border-radius: 50% / 60% 60% 40% 40%;}

Si no entiendes muy bien cómo funciona este código, te invito a que leas el artículo de la semana pasada en el que expliqué cómo dibujar un huevo. Como vamos a querer dibujar una cara dentro, vamos a poner el cuerpo en posición: relativa. Y para mayor realismo vamos a añadir también una pequeña sombra, así que añade estas dos líneas a tu clase de cuerpo:

position: relative;box-shadow: 7px 7px 0 7px #eee;

Paso 2: la cara

Empezaremos por darle la vista a nuestra gallina. Si te fijas en la ilustración, tenemos un ojo que aparece en la parte superior del cuerpo y otro en la inferior. Así que vamos a crear dos divs con la clase ojo, uno en nuestro div cuerpo y otro en nuestro div pollo, justo encima del cuerpo. En nuestro primer div de ojo también vamos a añadir una clase de ojo-derecha para distinguirlo del otro y posicionarlo adecuadamente. A continuación, haremos dos círculos negros con él:

.eye {position: absolute;height: 15px;width: 15px;border-radius: 50%;background-color: #000;top: 50px;}.eye-right {left: 50px;}

Si todo va bien, deberías conseguir esto por ahora:

Un huevo que te mira
Un huevo que te mira

¡Ahora podemos añadirle un pico! Vamos a separar el pico en dos partes: la superior y la inferior, así que añade esto a tu cuerpo:

<div class="beak-top"></div><div class="beak-bottom"></div>

Para la parte superior vamos a dibujar un semicírculo amarillo. Para ello sólo tienes que poner un radio de borde en las dos esquinas de la parte superior del mismo tamaño que la altura de tu elemento. También añadiremos un efecto de «reflejo» en el pico, para ello puedes utilizar una sombra o un borde. Y como es más corto de escribir, aquí pasé por un borde que simplemente puse en blanco a la izquierda del pico.

Para la parte inferior, simplemente dibujamos un rectángulo naranja con las dos esquinas inferiores redondeadas:

.beak-top {width: 27px;height: 15px;background-color: #FFDA0F;border-radius: 27px 27px 0 0;position: absolute;top: 70px;left: -10px;border-left: 3px solid #fff;}.beak-bottom {width: 20px;height: 7px;background-color: #f0ba43;border-radius: 0 0 7px 7px;position: absolute;top: 85px;left: -1px;}

Y para rematar el pico, tenemos que añadir la parte roja debajo del pico. Y como no tengo ni idea de cómo se llama, he utilizado sobriamente «bajo el pico» como clase. ¡Ten cuidado, como quieres posicionarlo debajo del pico, tu div debe estar posicionado por encima de los dos divs del pico (también puedes jugar con los z-indexes pero te aconsejo que lo evites al máximo)! Entonces simplemente lo convertimos en un rectángulo rojo y jugamos con el radio del borde para darle esta forma particular:

.under-beak {height: 20px;width: 15px;background-color: #A20000;position: absolute;top: 85px;left: 5px;border-radius: 20px 2px 8px 8px;}

El ala o muslo

Para el ala, dibujaremos un rectángulo transparente, redondearemos sus esquinas inferiores y mostraremos sólo los bordes inferior e izquierdo. Añade el div de las alas en tu cuerpo, y en tu CSS, escribe:

.wing {width: 40px;height: 20px;border-radius: 0 0 10px 30px;position: absolute;top: 100px;left: 75px;border: 5px solid;border-color: transparent transparent #000 #000;}

Para las piernas también necesitamos tener una delante del cuerpo y otra detrás, así que haz lo mismo que para los ojos: un div de piernas/derecha en el cuerpo y un div de piernas fuera del cuerpo, encima. A continuación, simplemente dibujamos dos rectángulos lo suficientemente altos y con los bordes superior e inferior redondeados:

.leg {position: absolute;width: 10px;height: 30px;border-radius: 10px;left: 55px;background-color: #f0ba43;bottom: -35px;}.leg-right {left: 80px;background-color: #FFDA0F;}

El toque final

Así podremos añadir la cresta y la cola de nuestra gallina. Como ambas son formas repetidas, crearemos un elemento para cada una y luego jugaremos con la sombra de la caja. Añade un div de cresta y un div de cola en tu HTML.

Ambos serán rectángulos con los bordes superiores redondeados y un borde expuesto para conseguir un efecto de reflexión como el del pico. Luego con una transformación inclinamos cada uno de ellos y duplicamos el elemento con una caja-sombra.

Una particularidad para la cresta: para tener el reflejo en dos de los elementos crearemos una sombra extra, más clara y desplazada sólo unos píxeles de la otra. Esto nos da esto:

.crest {width: 30px;height: 40px;background-color: #A20000;border-radius: 40px 40px 0 0;position: absolute;top: -25px;left: 45px;border-left: 6px solid #D30700;transform: rotate(-10deg);box-shadow: 31px 14px 0 0 #A20000, 27px 14px 0 3px #D30700, 50px 30px 0 0 #A20000;}.tail {width: 30px;height: 70px;background-color: #A20000;border-radius: 40px 40px 0 0;position: absolute;top: 90px;right: -25px;border-right: 6px solid #D30700;transform: rotate(50deg);box-shadow: -23px -10px 0 0 #A20000;}

El pequeño extra: dar un poco de vida

Una animación muy sencilla que me gusta mucho poner en mis diversos dibujos CSS: ¡ojos parpadeantes! Sólo es cuestión de reducir el tamaño de los ojos ajustando la altura para que el centro se mantenga igual:

.eye {animation: 8s chickenEye 1s infinite;}@keyframes chickenEye {2%{height: 7px;top: 54px;}4%{height: 15px;top: 50px;}6%{height: 7px;top: 54px;}8%{height: 15px;top: 50px;}}

Y en mi clase de ojos simplemente activo la animación después de un segundo tras la carga de la página, y cada 8s mi pollo parpadeará dos veces!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *