Mi primer dibujo con CSS,

¿Quieres aprender a dibujar con CSS y completar nuestro reto de

Mi primer dibujo con CSS

Hace un par de días lanzamos un reto con la temática de día de muertos, en él teníamos que crear y decorar un cráneo al estilo de las famosas calaveras de azúcar de las ofrendas mexicanas para después crear una cuadrícula de ellas y luego animarlas con un par de transiciones, todos sabemos cómo crear una cuadrícula utilizando un grid, pero ¿Cuántos de nosotros nos hemos animado a dibujar con CSS?

Todos hemos visto a personas increíblemente talentosas crear figuras loquísimas como estas:

Pero pocos nos hemos animado a intentarlo y a echar volar nuestra imaginación utilizando cajas, bordes, sombras, posiciones y un montón de propiedades interesantes de CSS.

Comencé con la mente en blanco este proyecto pero después de investigar un poco y analizar el código de otros creadores comprendí que el principio más básico es descomponer en formas geométricas simples los cuerpos que deseamos crear.

En internet podemos encontrar generadores y catálogos de formas con CSS en sitios como este, sin embargo yo decidí crear las formas necesarias con mi propio ingenio, es por eso que no se parecen en nada mis figuras.

Después de jugar en poco con el diseño tradicional de la calavera me decidí implementar un diseño de la siguiente manera, tenemos un gran círculo que crea la parte principal del cráneo y dos rectángulos con bordes redondeados debajo que se conectan perfectamente en los bordes para crear un descenso suave.

Finalmente agregue un rectángulo que nos ayudará a crear la mandíbula, donde utilice dos rectángulos rotados y uno central para darle un mentón robusto a la calavera:

Los invito a experimentar, a jugar con su imaginación y con las infinitas posibilidades que las propiedades CSS nos ofrecen, por eso mi diseño es diferente al que creó uxcristopher, sin embargo aquí les dejo una pequeña pista de como hubiera comenzado a crear su hermoso diseño del cráneo.

Antes de continuar contándoles como cree mi calavera, les recomiendo que organicen su código CSS y que sigan las buenas prácticas para poder hacer cambios en su dibujo.

• Utilicen nombres claros y descriptivos, si desean utilicen la metodología BEM, si utilizan un preprocesador de CSS, esto será sumamente conveniente.

<div class="head">
  <div class="head-top">
    <div class="head-top--left">
    <div class="head-top--right">
  </div>
  <div class="head-bottom">
    <div class="head-bottom--left">
    <div class="head-bottom--right">
  </div>
</div>

• DRY, Don´t Repeat Yourself: Utiliza estilos compartidos entre los elementos idénticos, reutiliza las clases y organiza sabiamente tu código.

<div class="eye eye-right"></div>
<div class="eye eye-left"></div>

.eye {
  position: absolute;
  background: var(--black);
  width: 80px;
  height: 90px;
  border-radius: 50%;
  box-shadow: inset 0px 0px 6px 4px var(--eye-first), inset 0px 0px 8px 5px var(--eye-second);
}

.eye-right {
  right: 10px;
  transform: rotate(77deg);
}

.eye-left {
  left: 10px;
  transform: rotate(277deg);
}

• Utiliza las Custom Properties de CSS para poder cambiar muchisimos colores con una sola linea de codigo, si deseas aprender mas de este tema con Leonidas, puedes ver un video del tema aqui.

A continuación cree los pómulos de la calavera para tener un mejor contorno utilizando una caja con bordes redondeados y con un solo borde visible de la siguiente manera:

Esa última implementación me dejó con dos lineas en medio del rostro, por eso las use para crear el contorno de la boca, esto lo hice con un par de cajas con bordes redondeados y con solo dos bordes visibles, les añadí un background usando linear gradient para que parecieran los huecos alrededor de nuestra mandíbula.

.cheek-line-right {
  background: linear-gradient(138deg, rgba(0,0,0,1) 0%, rgba(135,135,135,1) 31%, rgba(255,255,255,0) 63%);
}

Para crear la dentadura, lo mejor era crear una cuadrícula usando el display: grid;, como un pequeño detalle decidí darles un tamaño de grid-template-columns: 1fr 1.1fr 1.2fr 1.2fr 1.1fr 1fr; para que los laterales fueran más pequeños, después solo tuve que añadirle bordes negros y redondeados, aqui una muestra del CSS.

.mouth {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.2fr 1.2fr 1.1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.tooth {
  border: 4px solid var(--black);
  background: var(--white);
}
.tooth-top {
  border-radius: 45% 45% 0 0;
}
.tooth-bottom {
  border-radius: 0 0 45% 45%;
}

Para los ojos decidí añadir dos simples círculos, rotarlos y darles un background negro, como detalle le añadí un par de sombras internas.

Cada sección de la nariz la cree usando un triángulo creado con clip-path y un círculo.

Para el resto de la decoración utilicé cuadrados rotándolos y agregado múltiples bordes y sombras.

Es aquí donde tienes que aprovechar tu creatividad para decorar tu calavera de la mejor manera posible.

Finalmente para seguir la regla de Don't Repeat Yourself cree un script para multiplicar las calaveras y completar el diseño, si las calaveras te quedaron demasiado grandes, siempre puedes añadir un transform: scale(0.5); para hacerlas más pequeñas.

Si deseas ver el proyecto completo y conocer como añadi el JS y la version responsive, puedes ir al repositorio del proyecto.

Sígueme en mis redes sociales para que te siga contando todo lo que he aprendido como Fronted Developer en el #noTeRindas Team.