CSS + Pokemon
Tags: css, codepen, codenewbie, html
Published: 2020-05-15 17:23:01

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](https://github.com/maximedaraize/pokemon-pixel/tree/master/img) from the game.
![151 pokemons](https://dev-to-uploads.s3.amazonaws.com/i/oks08uefampx6nnfg9cq.png)


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](https://dev-to-uploads.s3.amazonaws.com/i/r0mx1klphbmyll5kkzc2.png)


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

So I made a grid containing 1600 empty  `<div>`... 😅
```html
<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.

```javascript
//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.

```css
/*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);
}
```

![grid](https://dev-to-uploads.s3.amazonaws.com/i/k8qq238u16rizgenqeqb.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/gs8liz7zxzjh5f466kul.png)

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)`.

```css
//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
```javascript
$('.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](https://codepen.io/collection/XJzqvm?cursor=ZD0wJm89MSZwPTEmdj0yNjM5MTE5) the Codepen collection of pokemon I made so far 🙆‍♂️