Pure CSS Pokeball 8-Bit Image
In this tutorial, I’m going to show you how to create a pure CSS 8-bit Pokeball image from scratch using only CSS box shadow. Let’s check it out! (Full source code at the end of this post)
HTML
First I’m going to create a wrapper div. then inside create another div that we will use as a model for each pixel.
<div class="pokeball">
<div class="pixel"></div>
</div>
CSS
Before we begin, let’s look at the size of the image that we will be using as example.
the Pokeball has 12 pixels in width and height so we will use that to define our wrapper size.
I’m going to define the size of each pixel with 1 rem. (I use relative em unit since it’s easier to resize the image later) The image is a 12 pixels square so that’s 12 rem for both sides. Also I’ll center the div by using 50% top and left, minus 50% translate and position absolute.
.pokeball {
width: 12rem;
height:12rem;
top:50%;
left: 50%;
transform:translate(-50% ,-50%);
position: absolute;
}
Next our pixel div, set the width and height to 1 rem.
.pixel {
width: 1rem;
height: 1rem;
}
And now here comes the fun part.
We’re going to use box-shadow property to draw each pixel. It’s easier to work on this row by row. So on the first row of the image we have four white pixels, four grey pixels and four white pixels . Let’s put that to our box shadow.
box-shadow:
/* row 1 First Pixel */
0rem 0rem 0 -0.05rem #fff
The first pixel starts with 0 rem for both x,y offset. Set the blur radius to zero.
For the spread, here is my trick. I set the spread to -0.05 rem. This will trim out the pixel border with a small amount and create a grid effect. Feel free to remove this if you don’t like it. Then apply the color (white)
That’s it for the first pixel. Now copy over for the rest and change the x,y offset and color accordingly. Your first row should look like this.
box-shadow:
/* row 1 */
0rem 0rem 0 -0.05rem #fff,
1rem 0rem 0 -0.05rem #fff,
2rem 0rem 0 -0.05rem #fff,
3rem 0rem 0 -0.05rem #fff,
4rem 0rem 0 -0.05rem #222,
5rem 0rem 0 -0.05rem #222,
6rem 0rem 0 -0.05rem #222,
7rem 0rem 0 -0.05rem #222,
8rem 0rem 0 -0.05rem #fff,
9rem 0rem 0 -0.05rem #fff,
10rem 0rem 0 -0.05rem #fff,
11rem 0rem 0 -0.05rem #fff
When working on things like this, I suggest you should use a live browser reload tool so you don’t have to switch between the code and the browser so often. What I currently use is Live Server visual code extension. Check out my setup tutorial if you’re interested.
Now we’ll do the same for the rest. I’m sure it will take a while 🙂
See the step-by-step implementation in this video below
And that’s it. Hope you enjoy this tutorial. If you love it. Please, feel free to like or subscribe to support our channel. Thanks for watching and see you in the next video. Bye!
Full Source Code
HTML
<div class="pokeball">
<div class="pixel"></div>
</div>
CSS
.pokeball {
width: 12rem;
height:12rem;
top:50%;
left: 50%;
transform:translate(-50% ,-50%);
position: absolute;
}
.pixel {
width: 1rem;
height: 1rem;
box-shadow:
/* row 1 */
0rem 0rem 0 -0.05rem #fff,
1rem 0rem 0 -0.05rem #fff,
2rem 0rem 0 -0.05rem #fff,
3rem 0rem 0 -0.05rem #fff,
4rem 0rem 0 -0.05rem #222,
5rem 0rem 0 -0.05rem #222,
6rem 0rem 0 -0.05rem #222,
7rem 0rem 0 -0.05rem #222,
8rem 0rem 0 -0.05rem #fff,
9rem 0rem 0 -0.05rem #fff,
10rem 0rem 0 -0.05rem #fff,
11rem 0rem 0 -0.05rem #fff,
/* row 2 */
0rem 1rem 0 -0.05rem #fff,
1rem 1rem 0 -0.05rem #fff,
2rem 1rem 0 -0.05rem #222,
3rem 1rem 0 -0.05rem #222,
4rem 1rem 0 -0.05rem #f00,
5rem 1rem 0 -0.05rem #f00,
6rem 1rem 0 -0.05rem #f00,
7rem 1rem 0 -0.05rem #f00,
8rem 1rem 0 -0.05rem #222,
9rem 1rem 0 -0.05rem #222,
10rem 1rem 0 -0.05rem #fff,
11rem 1rem 0 -0.05rem #fff,
/* row 3 */
0rem 2rem 0 -0.05rem #fff,
1rem 2rem 0 -0.05rem #222,
2rem 2rem 0 -0.05rem #f00,
3rem 2rem 0 -0.05rem #f00,
4rem 2rem 0 -0.05rem #f00,
5rem 2rem 0 -0.05rem #f00,
6rem 2rem 0 -0.05rem #f00,
7rem 2rem 0 -0.05rem #f00,
8rem 2rem 0 -0.05rem #f00,
9rem 2rem 0 -0.05rem #f00,
10rem 2rem 0 -0.05rem #222,
11rem 2rem 0 -0.05rem #fff,
/* row 4 */
0rem 3rem 0 -0.05rem #fff,
1rem 3rem 0 -0.05rem #222,
2rem 3rem 0 -0.05rem #f00,
3rem 3rem 0 -0.05rem #f00,
4rem 3rem 0 -0.05rem #f00,
5rem 3rem 0 -0.05rem #f00,
6rem 3rem 0 -0.05rem #f00,
7rem 3rem 0 -0.05rem #f00,
8rem 3rem 0 -0.05rem #f00,
9rem 3rem 0 -0.05rem #f00,
10rem 3rem 0 -0.05rem #222,
11rem 3rem 0 -0.05rem #fff,
/* row 5 */
0rem 4rem 0 -0.05rem #222,
1rem 4rem 0 -0.05rem #f00,
2rem 4rem 0 -0.05rem #f00,
3rem 4rem 0 -0.05rem #f00,
4rem 4rem 0 -0.05rem #f00,
5rem 4rem 0 -0.05rem #f00,
6rem 4rem 0 -0.05rem #f00,
7rem 4rem 0 -0.05rem #f00,
8rem 4rem 0 -0.05rem #f00,
9rem 4rem 0 -0.05rem #f00,
10rem 4rem 0 -0.05rem #f00,
11rem 4rem 0 -0.05rem #222,
/* row 6 */
0rem 5rem 0 -0.05rem #222,
1rem 5rem 0 -0.05rem #f00,
2rem 5rem 0 -0.05rem #f00,
3rem 5rem 0 -0.05rem #f00,
4rem 5rem 0 -0.05rem #f00,
5rem 5rem 0 -0.05rem #222,
6rem 5rem 0 -0.05rem #222,
7rem 5rem 0 -0.05rem #f00,
8rem 5rem 0 -0.05rem #f00,
9rem 5rem 0 -0.05rem #f00,
10rem 5rem 0 -0.05rem #f00,
11rem 5rem 0 -0.05rem #222,
/* row 7 */
0rem 6rem 0 -0.05rem #222,
1rem 6rem 0 -0.05rem #222,
2rem 6rem 0 -0.05rem #f00,
3rem 6rem 0 -0.05rem #f00,
4rem 6rem 0 -0.05rem #222,
5rem 6rem 0 -0.05rem #fff,
6rem 6rem 0 -0.05rem #fff,
7rem 6rem 0 -0.05rem #222,
8rem 6rem 0 -0.05rem #f00,
9rem 6rem 0 -0.05rem #f00,
10rem 6rem 0 -0.05rem #222,
11rem 6rem 0 -0.05rem #222,
/* row 8 */
0rem 7rem 0 -0.05rem #222,
1rem 7rem 0 -0.05rem #fff,
2rem 7rem 0 -0.05rem #222,
3rem 7rem 0 -0.05rem #222,
4rem 7rem 0 -0.05rem #222,
5rem 7rem 0 -0.05rem #fff,
6rem 7rem 0 -0.05rem #fff,
7rem 7rem 0 -0.05rem #222,
8rem 7rem 0 -0.05rem #222,
9rem 7rem 0 -0.05rem #222,
10rem 7rem 0 -0.05rem #fff,
11rem 7rem 0 -0.05rem #222,
/* row 9 */
0rem 8rem 0 -0.05rem #fff,
1rem 8rem 0 -0.05rem #222,
2rem 8rem 0 -0.05rem #fff,
3rem 8rem 0 -0.05rem #fff,
4rem 8rem 0 -0.05rem #fff,
5rem 8rem 0 -0.05rem #222,
6rem 8rem 0 -0.05rem #222,
7rem 8rem 0 -0.05rem #fff,
8rem 8rem 0 -0.05rem #fff,
9rem 8rem 0 -0.05rem #fff,
10rem 8rem 0 -0.05rem #222,
11rem 8rem 0 -0.05rem #fff,
/* row 10 */
0rem 9rem 0 -0.05rem #fff,
1rem 9rem 0 -0.05rem #222,
2rem 9rem 0 -0.05rem #fff,
3rem 9rem 0 -0.05rem #fff,
4rem 9rem 0 -0.05rem #fff,
5rem 9rem 0 -0.05rem #fff,
6rem 9rem 0 -0.05rem #fff,
7rem 9rem 0 -0.05rem #fff,
8rem 9rem 0 -0.05rem #fff,
9rem 9rem 0 -0.05rem #fff,
10rem 9rem 0 -0.05rem #222,
11rem 9rem 0 -0.05rem #fff,
/* row 11 */
0rem 10rem 0 -0.05rem #fff,
1rem 10rem 0 -0.05rem #fff,
2rem 10rem 0 -0.05rem #222,
3rem 10rem 0 -0.05rem #222,
4rem 10rem 0 -0.05rem #fff,
5rem 10rem 0 -0.05rem #fff,
6rem 10rem 0 -0.05rem #fff,
7rem 10rem 0 -0.05rem #fff,
8rem 10rem 0 -0.05rem #222,
9rem 10rem 0 -0.05rem #222,
10rem 10rem 0 -0.05rem #fff,
11rem 10rem 0 -0.05rem #fff,
/* row 12 */
0rem 11rem 0 -0.05rem #fff,
1rem 11rem 0 -0.05rem #fff,
2rem 11rem 0 -0.05rem #fff,
3rem 11rem 0 -0.05rem #fff,
4rem 11rem 0 -0.05rem #222,
5rem 11rem 0 -0.05rem #222,
6rem 11rem 0 -0.05rem #222,
7rem 11rem 0 -0.05rem #222,
8rem 11rem 0 -0.05rem #fff,
9rem 11rem 0 -0.05rem #fff,
10rem 11rem 0 -0.05rem #fff,
11rem 11rem 0 -0.05rem #fff
}
