Construir figuras con CSS puro es una de las habilidades más satisfactorias del frontend. En esta sesión se parte de una estructura HTML ya preparada con capas y contextos de apilamiento para crear, paso a paso, un conejito completo: orejas, cabeza y ojos, todo con propiedades que ya conoces como border-radius, position absolute y background.
¿Por qué la estructura HTML es tan importante antes de estilizar?
Antes de escribir una sola línea de CSS, lo primero es tener el HTML completamente listo. La razón principal es el contexto de apilamiento [0:44]. Cuando un elemento tiene un z-index definido, todos sus hijos quedan atrapados dentro de ese contexto. Esto significa que, aunque un hijo tenga un z-index de un millón, nunca superará a un hermano del padre que tenga un z-index mayor [1:07]. Si alguna vez colocaste valores enormes de z-index sin obtener el resultado esperado, la causa está precisamente en esta jerarquía de contextos.
Por eso, planificar la estructura antes de estilizar evita problemas difíciles de depurar después.
¿Cómo se construyen las orejas del conejito con CSS?
El conejito se descompone en piezas reutilizables: cada oreja tiene una parte externa (outer) y una interna (inner), y ambas orejas comparten la misma lógica [2:27].
¿Qué HTML necesitan las orejas?
Se crean div con clases descriptivas para facilitar la lectura del código:
left-ear-outer y left-ear-inner para la oreja izquierda.right-ear-outer y right-ear-inner para la derecha.
Usar nombres claros permite saber de inmediato qué elemento se está manipulando.
¿Cómo se estiliza la oreja externa e interna?
Para la parte externa se aplica [5:08]:
css
.left-ear-outer {
background: white;
border-radius: 90%;
width: 20px;
height: 50px;
position: absolute;
left: 10px;
}
- Un
border-radius de 90 % genera una forma ovalada, no completamente circular.
- El
position: absolute permite mover el elemento con left, right, top y bottom, tomando como referencia al contenedor padre que actúa como contexto posicional [6:20].
Para la parte interna se reduce el tamaño a la mitad y se cambia el color a pink [7:20]:
css
.left-ear-inner {
background: pink;
border-radius: 90%;
width: 10px;
height: 30px;
position: absolute;
top: 10px;
left: 15px;
}
La oreja derecha es exactamente el mismo código, solo se reemplaza left por right en las propiedades de posición [8:30].
¿Cómo se crean la cabeza y los ojos del conejito?
La cabeza es un contenedor con clase head que aloja dos elementos hijos para los ojos [9:12]. Se usa una clase compartida (head__eye) para las propiedades comunes y clases individuales (head__eye--left, head__eye--right) para la posición específica de cada ojo [4:00].
¿Cómo se posicionan los ojos dentro de la cabeza?
La cabeza se estiliza como un círculo blanco con border-radius: 50%, un ancho del 100 % del contenedor y un top: 30px para bajarla [9:50]. Los ojos son círculos diminutos:
css
.head__eye {
background: gray;
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
top: 15px;
}
Como los ojos ya están dentro del contenedor head, su top se calcula desde el borde superior de la cabeza, no desde la capa general [10:50]. Este detalle es clave al trabajar con posicionamiento absoluto anidado.
Para separar los ojos se ajusta el valor de left y right. Tantear con valores como 20, 30 o 35 píxeles es parte natural del proceso creativo con CSS [12:00].
¿Qué son los patrones zigzag con linear-gradient?
Los muros del escenario usan un patrón de zigzag construido con linear-gradient en la propiedad background [13:30]. La idea es crear una sola "celda" del patrón que se repite automáticamente, como una cuadrícula donde cada cuadro es idéntico al siguiente. Esto permite generar texturas complejas sin imágenes, solo con CSS puro.
Existen páginas especializadas en generar patrones CSS que puedes adaptar a tu gusto personal.
Ahora que ya sabes cómo dibujar un conejito, el reto es replicarlo en las cuatro capas del juego y experimentar con tus propios estilos. ¿Qué colores y formas le darías a tu versión? Comparte tu resultado en los comentarios.
