I have always been amazed of CSS drawings with a single div. A couple of months ago, I decided to learn how to do it.

First, what are the benefits of drawing like this?

* lightweight drawings (when loading the web page)

* technology supported by most browsers

* limited options increase creativity and reinforce knowledge

* is css code

Now, what are the disadvantages?

* is a little difficult to visualize/debug by parts

* is css code

One way to do it is in a pure form as only use gradients: linear-gradient() y radial-gradient(). This link explains it really well: Drawing Images with CSS Gradients

That is how I draw Blinky from 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;
}

Another way to do it is besides using linear-gradient() and radial-gradient() also use pseudo elements :before, :after, border y border-radius and box-shadow. This way is easier and flexible, especially with triangle figures. This link explains it really well: Single Div Drawings with CSS

Other version of 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;
}

My next step is to add an animation of Blinky to the blog.

Compartir en: TwitterFacebook