Backstage Blog: Making a Pixelated GIF Poem

Most Everyones Mad Here
As part of the #EDU522 experience you will publish a #backstage blog. Nothing makes you better at teaching then reflecting on learning and you end up with text for later use in documentation and tutorials (for my computer friends they are very different).

So I wanted to share the journey of how I came about to write “A Poem About CSS” It began with me scrolling through the art projects on Glitch.

It began sometime ago.

Why I did it

Many folks will come to the web through the love of art. Not just code, not just words, but fun, tragic, silly, but mainly unique art. Words become banal or simply too hard to find.

You can see an early example of me trying to make art out of boring academic writing here and an even earlier attempt at CSS poetry. If you

If you didn’t know this, art is a pain to monetize, as soon as you fall in love with an app it goes away. Look at all those 401s from Storify. A fundamental truth of the web: If you let others control your art you will eventually lose it to link rot.

So I got to strolling through Glitch to see what kind of art projects were out there. At least here I can learn on their platform and move to GitHub or better yet my domain. I found the Animated Pixelated Gradient Maker from Noel Leigh and being feeling some early web nostalgia I joked about making a bunch of buttons.

Though I immediately saw gif poetry bouncing around my head. It would be pretty easy. I have played with CSS Animation before. Its basically copy and paste and some math. I didn’t have time to squeeze in the work but I did explain my lack of time to write a poem by writing a poem about not having time to write a poem.

How I Did It

The first step was to write the poem. Remember those elusive words? Well to make it easy I settled on a found poem. Afterall it is kind of meta to write a poem about broken CSS by copying and pasting. That is where broken CSS, and the beauty that comes after begins.

So I went to the IndieWeb-Dev channel from the night before and began lifting lines. I only used my words. Even though everything is on chat is Public Domain I do not use someone else’s words (except for a bookmark) without asking.

I then went back to Noel’s projects and began making my gifs. The colors were just randomly selected from the wheel at first. I am color blind so I have no idea what I picked, until I got lazy and went with basic RGB. I can read “RED.”

I then went and copied the CSS Animation I had found on stackoverflow. It was set to 30 seconds with five slides for 6 seconds each. So I changed this to

imageAnimation 30s linear infinite 0s;

to 33 seconds. I then copied the #crossfade > img:nth-child(5) 6 more times and labeled them 6-11. Finally I went and set each delay to 3 seconds.

You can see -webkit-animation-delay goes up by 3 second intervals in each img child. Also note the last one stops 3 seconds before 33 seconds. These are the #crossfade animation is basically just a bunch of images stacked on each other that go transparent revealing the image under it.

Future Improvements

I forgot one slide, “Whitespace Always a Friend” if I want to add it I have to change my counter to 36 seconds and re-order everything. I will probably not get back to adding it, but I want folsk to know how much meaning is carried in the space between words.

Featured Image: by curated by at

This was also posted to

4 responses on “Backstage Blog: Making a Pixelated GIF Poem”


Leave a Reply

Your email address will not be published. Required fields are marked *