Siempre me ha maravillado los dibujos en CSS con un único div. Hace unos meses atrás, me decidí a aprender como se hace.

Primero, ¿cuáles son los beneficios de dibujar así?

* dibujos livianos (al cargar una página web)

* tecnología soportada por la mayoría de navegadores

* opciones limitadas incrementan la creatividad y refuerzan el conocimiento

* es código css

Ahora, ¿cuáles son las desventajas?

* es algo difícil visualizar/depurar por partes

* es código css

Una forma de hacerlo es la forma purista al sólo utilizar gradientes: linear-gradient() y radial-gradient(). El siguiente link lo explica muy bien: Drawing Images with CSS Gradients

Así dibujé a Blinky de Pac-Man:

.ghost-gradient {
  background:
    /* iris1 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--iris-color) 49%,
        var(--iris-color-transparent) 50%
      ) 56% 27% / 1.25em 1.25em, /* eye1 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--eye-color) 49%,
        var(--eye-color-transparent) 50%
      ) 60% 25% / 3em 2.75em,
    /* iris2 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--iris-color) 49%,
        var(--iris-color-transparent) 50%
      ) 38% 27% / 1.25em 1.25em, /* eye2 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--eye-color) 49%,
        var(--eye-color-transparent) 50%
      ) 40% 25% / 3em 2.75em,
    /* head */ radial-gradient(
        102% 75% at 50% 50%,
        var(--body-color) 49%,
        var(--body-color-transparent) 50%
      ) 50% 0 / 8em 10em, /* body */ linear-gradient(var(--body-color), var(--body-color)) 50% 35% /
      8em 5.5em,
    /* leg left */ linear-gradient(120deg, var(--body-color) 12%, var(--body-color-transparent) 12%)
      60% 69% / 10em 5.5em, /* leg center left 1 */ linear-gradient(
        -120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) -14% 70% / 10em 5.5em,
    /* leg center right 1 */ linear-gradient(
        120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) 86% 70% / 10em 5.5em, /* leg center left 2 */ linear-gradient(
        -120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) 14% 70% / 10em 5.5em,
    /* leg center right 2 */ linear-gradient(
        120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) 114% 70% / 10em 5.5em, /* leg right */ linear-gradient(
        -120deg,
        var(--body-color) 12%,
        var(--body-color-transparent) 12%
      ) 40% 69% / 10em 5.5em;
  background-repeat: no-repeat;
  font-size: var(--font-size);
  width: 20em;
  height: 20em;
}

La otra forma de hacerlo es utilizando además de linear-gradient() y radial-gradient() también pseudo elements :before, :after, border y border-radius y box-shadow. Es mucho más fácil y flexible, sobre todo para figuras triangulares. El siguiente link lo explica muy bien: Single Div Drawings with CSS

Otra versión de Blinky:

.ghost-border::before {
  background:
  /* iris1 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--iris-color) 49%,
        var(--iris-color-transparent) 50%
      ) 17% 48% / 1.25em 1.25em, /* eye1 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--eye-color) 49%,
        var(--eye-color-transparent) 50%
      ) 15% 47% / 3em 2.75em,
    /* iris2 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--iris-color) 49%,
        var(--iris-color-transparent) 50%
      ) 67% 48% / 1.25em 1.25em, /* eye2 */ radial-gradient(
        85% 100% at 50% 50%,
        var(--eye-color) 49%,
        var(--eye-color-transparent) 50%
      ) 84% 47% / 3em 2.75em;
  content: '';
  position: absolute;
  margin-top: 6%;
  margin-left: 30%;
  border-top-left-radius: 11em;
  border-top-right-radius: 11em;
  background-color: var(--body-color);
  background-repeat: no-repeat;
  font-size: var(--font-size);
  /* outline: 1px solid #aaa;*/
  width: 8em;
  height: 9.5em;
}

.ghost-border {
  background:
    /* leg left */ linear-gradient(120deg, var(--body-color) 12%, var(--body-color-transparent) 12%)
      60% 69% / 10em 5.5em, /* leg center left 1 */ linear-gradient(
        -120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) -14% 70% / 10em 5.5em,
    /* leg center right 1 */ linear-gradient(
        120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) 86% 70% / 10em 5.5em, /* leg center left 2 */ linear-gradient(
        -120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) 14% 70% / 10em 5.5em,
    /* leg center right 2 */ linear-gradient(
        120deg,
        var(--body-color) 13%,
        var(--body-color-transparent) 12%
      ) 114% 70% / 10em 5.5em, /* leg right */ linear-gradient(
        -120deg,
        var(--body-color) 12%,
        var(--body-color-transparent) 12%
      ) 40% 69% / 10em 5.5em;
  position: absolute;
  background-repeat: no-repeat;
  font-size: var(--font-size);
  /* outline: 1px solid #aaa;*/
  width: 20em;
  height: 20em;
}

Ahora mi siguiente paso es agregar una animación de Blinky al blog.

Compartir en: TwitterFacebook