DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS + Pokemon
Maxime
Maxime

Posted on

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.
151 pokemons

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.
Pikachu

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>
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

grid

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.

squirtle

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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 πŸ™†β€β™‚οΈ

Top comments (0)

Now it's your turn.

Β 
πŸ—’ Share a tutorial
πŸ€” Reflect on your coding journey
❓ Ask a question
Β 
Create an account to join hundreds of thousands of DEV members on their journey.