Frontend Challenge: Pride Month Pure CSS Pixel Art

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

I've been living in the northern hemisphere for almost ten years now. Although I still find it hard to get used to having summer during the southern winter months...

So, I've decided not to focus on seasons and instead use this challenge to create a Pride flag to celebrate and advocate for Pride month.

Demo

This is the result:

You can also see the code in GitHub, or view an online demo here.

Journey

I've been looking for a chance to experiment with some pixel art CSS drawing, so this challenge turned out to be a great opportunity.

I came across this amazing blog post by Geoff Graham, where I learned about different ways of drawing pixel art with CSS.

I decided to use the box-shadow technique because it seemed to allow me to make quick progress without much setup and also gave me the possibility to animate my illustration.

This technique involves creating a container that serves as the base for the drawing. You can think of this element as a grid, where you will be placing 'pixels' to create the design.

Before starting to draw, we need to define the measurement of the pixel unit in the illustration. I used an 8px by 8px square.

Next, let's set the width and height of the container element, keeping in mind that these values must represent the maximum area the drawing will take. hey must also be multiples of the measurement we are using for the pixel unit.

.flag__container {
    width: 320px;
    height: 320px;
}

The combination of the container width and height with the pixel size will define the definiton of the image. You can create more or less detailed illustrations by changing those values.

Now that we have set a width and height in the element container, we can place a new div element inside it, with the chosen dimensions to represent a pixel unit in the drawing.

.flag__pixels {
    height: 8px;
    width: 8px;
}

The next step is to start drawing. The illustration is created by adding the box-shadow property, "pixel by pixel", as needed:

.flag__pixels {
    height: 8px;
    width: 8px;
    box-shadow: 
    0px 8px rgb(226, 226, 226),
    /* many pixels here... */

Once you are ready, you can create keyframes to animate the box-shadow property as needed. Pretty cool!

.flag__pixels {
    height: 8px;
    width: 8px;
    box-shadow: 
    0px 8px rgb(226, 226, 226),
    /* many more pixels here... */
    animation: flag 3s infinite; 
}

@keyframes flag {
 0% {
      box-shadow: 
      0px 8px rgb(226, 226, 226),
      /* many more pixels here... */
    }
50% {
      0px 16px rgb(226, 226, 226),
      /* many more pixels here... */
    }
}

I find Dev Challenges are great opportunities to push myself to try out ideas I have in mind and learn about new things. There's nothing like deadlines :D

I had a lot of fun drawing and I'm sure I will keep creating more pixel art illustrations.

Thanks for checking out my work and reading!