To start off, I just want to say that Lesley Barnes is an amazing artist and one of my favorites. This post and the pen wouldn't exist if it wasn't for her creativity and hardwork in making the original piece. When you have a moment I encourage you to look at her work.

When I saw her original poster for Animation Migration I knew I wanted to try and recreate it with CSS Grid. It turned out to be a really good lesson in attention to details, and repetition. You can view my recreation here.

The three key pieces that helped me in making the recreation was CSS Grid, Gradients, and CSS Variables (Custom Properties).

CSS Grid (a.k.a CSS Grid Layout) is a two-demensional grid-based layout system. It allows you to not only align items into columns and rows, but makes many other layouts possible and much easier as well.

CSS Gradients lets you define transitions between two or more colors. We can define linear gradients and radial gradients.

CSS Variables (Custom Properties) allows you to define a unique property and set a value to it. This property is then able to be used throughout your CSS document with the var() function.

Example from MDN:

  
:root {
  --main-color: #06c; 
}
#foo h1 {
  color: var(--main-color); 
}

Here we can see that in the root we define a custom property named main color with a color value. Then, we're able to use that custom property and apply it to #foo h1 by referencing it with the var function. Now the color of #foo h1 is #06c;.

Defining the Grid

Setting the Grid was pretty simple here. I just needed to count the rows and columns of the original piece. If you look at the original though you'll notice there are boxes that are cut off, I decided for the sake of simplicity to just leave these out. Afterall, my goal in the recreation wasn't to get it exactly spot on but to get it as close as possible and become more familiar with CSS while doing so.

I have 18 columns and 25 rows. From the looks of the original, they're all the same size so I'm able to define a pretty simple grid.

   body {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(25, 5vw);
}

Next, I start laying out my blocks along the grid. I slowly, go row by row. I figured this would be the easiest way for me to keep track of everything, not lose my place, and keep my code clean and organized.

First row layed out.

  <!-- row 1 -->
<div id="yt1"></div>
<div id="gp1"></div>
<div id="gp2"></div>
<div id="gp3"></div>
<div id="gp4"></div>
<div id="gp5"></div>
<div id="gp6"></div>
<div id="or1"></div>
<div id="or2"></div>
<div id="or3"></div>

I give each div block a unique ID. I chose the IDs based off their colors and number of that color. So, for example, my first div has the ID "yt1". yt stands for Yellow Tan(the two colors of that block), and 1 because it's the first block with those colors.

Once I set a row and it's blocks in HTML, I style and position them with CSS.

  /* row 1 */

#yt1 {
  grid-column: 5;
  grid-row: 1;
  background-image: linear-gradient(
    to top left,
    var(--tan) 50%,
    var(--yellow) 51%
  );
}

etc.

My first yellow tan box is set in the 5th column of the 1st row.

Defining Custom Properties and Gradients

CSS Variables(...custom properties...never sure which to call it..) let me pre-define my colors so that if I want to change them in the future, I only have to change them in one spot.

I decide to define them at the beginning of my CSS document so they're easy to access.

  /* color variables */

:root {
  --yellow: #fdf38e;
  --tan: #deb896;
  --green: #80c174;
  --pink: #eca4c9;
  --orange: #f8ba50;
  --red: #f2594c;
  --blue: #69c2c9;
  --black: #020202;
}

Now I can use my custom color properties in my gradients.

  #yt1 {
  background-image: linear-gradient(
    to top left,
    var(--tan) 50%,
    var(--yellow) 51%
  );
}

The majority of the image uses linear gradients except for one block...the eye.

I use a radial gradient for it.

  #rw {
  background-color: var(--red);
  background-image: radial-gradient(circle at center, white 35%, var(--red) 38%);
}

A Lesson in Repetition and Details

After setting 150+ boxes in unique spots on a grid you become very familiar with that grid. The original image has no grid lines, so there was a lot of going back and forth and counting on the image to make sure I was placing things in the right spot. But half way through, that process sped up as I got more familiar with the image and the grid.

Same with setting the gradients and their colors. Not all of the gradients are going the same direction. So paying attention to the details was key. Especially once you get to the animal. Here I had to slow back down to make sure I was really paying attention to the deatils: the direction of gradients, and colors. They're much more "random" in the animal and with the letters over them, your eyes almost start to play trick on you when you've been staring at them for so long.

By the end of making the pen I was much more comfortable with css grid and gradients, and the value of custom properties was clear. The repetition and paying close attention to details really helped drive home the benefits of these things and the understanding of how they work.


2,742 0 9