hello and welcome to red stapler channel 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 ready let's check it out let's start with the HTML first I'm
going to create a wrapper div that inside create another dip that we will
use as a model for each pixel
and next on to the 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
are going to use that to define our wrapper size
I'm going to define the size of each pixel with 1 REM I use relative em
units since it's easier to resize the image later the image is a 12 pixel
square so that's 12 REM for both sides also our center the div by using 50%
top-left - 50% translate and position:absolute
next our pixel let's set the width and height to 1 rem
and now here comes the fun part we are 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 the first four pixels or a white and the next four are gray and the
last four are white let's put that to our box shadow
the first pixels start with zero rem for both
set the blur radius to zero and here's the trick I'm going to set the spread
with 0.05 rem this will trim out the pixel border with a small amount
and create a grid effect and then copy over for the rest and increase the first
parameter for each pixel in the roll
and apply to correct color
and here we got the first row when working on things like this I
suggest you should use a live browser reload tools so you don't have to switch
between the code and the browser so often what I currently use is a live
server vs code extension check out my setup tutorial in the link below if you
are interested and now will do the same for the rest this will take a while so
I'm going to time-lapse the video and that's it hope you guys enjoyed this
tutorial if you loved it please feel free to like or subscribe to support our
channel thanks for watching and see you in the next video bye