CSS + Pokemon

I wanted to make some pokemon with CSS based on the original image from Pokemon Yellow (yep! nostalgia... 👾).

Here's how I did it!

First I collected all pokemon images from the game.

If you zoom on the images you start to see every pixel that composes the Pokemon. The goal was to replicate that pixel grid in html and css.

Some drawings are bigger than other, but the average is 40px by 40px.

So I made a grid containing 1600 empty <div>... 😅

<div class="canvas">
  <div class="pixel"></div>
  <div class="pixel"></div>
  <div class="pixel"></div>
  ...
</div>

You could also create the <div class="pixel"> with javascript or jQuery if you dont want to add 1600 line of html in your development process.

//create 1600 div with "pixel" className
/* You could also simply write 1600 divs in
the HTML section with the class .pixel inside
the .canvas container */
for (let step = 0; step < 1600; step++) {
  //create a div
  var pixel = document.createElement("div");
  //select the container with canvas Class
  var canvas = document.querySelector(".canvas");
  //append the div to the container
  document.querySelector(".canvas").appendChild(pixel);
  //add a class to the div
  pixel.setAttribute("class", "pixel");
}

Next, just add a little bit of CSS to see the grid.

/*grid container made of 40 columns and 40 rows. 
  Each of them the create a square of 12px*/
.canvas {
  display: grid;
  grid-template-columns: repeat(40, 12px);
  grid-template-rows: repeat(40, 12px);
}

.pixel {
  border: 1px solid rgba(fuchsia, 0.2);
}

After this step you only need to "color-pick" the color of that pokemon and start filling the <div class="pixel"> with it.

Squirtle is compose of 3 color:

• black (#000000)
• a light blue (#D6E6FF)
• a dark blue (#3AC5E6)

note that I did not fill the <div> with the color white.

The idea is to select a <div class="pixel"> with CSS based on its position.
For example the top left <div class="pixel"> is .pixel:nth-child(1) and the next one to its left is .pixel:nth-child(2).

//snippet example
.pixel:nth-child(171),
.pixel:nth-child(210),
.pixel:nth-child(178),
.pixel:nth-child(220),
.pixel:nth-child(302) {
  background: #3AC5E6;
}

Because there are 40 elements on each row and each column you can count it. But there is an easier way.

I made a small snippet that count the <div> position for me

$('.canvas').children('.pixel').hover(function() {
     var index = $(this).index() + 1;
  console.log(index);
});

When you pass your cursor hover a <div class="pixel">, it will output in the console its position number, so you can use it and color it based on the images yo have.

Here's the Codepen collection of pokemon I made so far 🙆‍♂️