Code Book Cover

2026-10-27 3:09 PM

#css #creative #code #design

My web development class is several weeks into learning CSS and we're finally at the point where we can position elements on the page. For this assignment, students create book covers or movie posters to practice setting up container elements and positioning other elements inside. I also do this project because I don't often get a chance to do some creative work - most of my code these days is prepping and grading assignments.

I recently read [John Scalzi's Old Man's War] which had a sweet minimalist cover I decided to re-create in HTML and CSS.

A side by side comparison of two book covers. The left is the original cover. It is a teal green color with a large yellow circle. There are triangle-shaped spaceships flying across the cover. It is a minimalist design. "John Scalzi" is in bold text at the top and the book title is at the bottom. The right is a re-made version. The teal background and large yellow circle are still present. A large triangular ship dominates the cover now. There are overlapping elements in the re-made version adding depth to the image.

I had to re-learn how to use clip-path and the polygon function to make the shapes out of CSS rather than using images. Other than that, everything is just HTML elements positioned on the page to give some depth with overlaps.

Because it's the web, I also took advantage of the interactive options. I also re-learned how to use the animation and @keyframes properties to make the graphic look like the ships were flying. Instead of positioning each ship on the page, I hard-coded the large foreground ship and then used a script to throw 10 more background ships onto the cover. It looks more organic and gives some nice variety each time the page is loaded. Here's a short GIF of the animation:

The same book cover showing a large ship with smaller ships behind. It is animated. The large foreground ship has an engine flare flickering between orange and red. The smaller ships in the background slowly move diagonally form left to right giving the impression that the foreground ship is moving quickly.

If you want to check out a live version, I threw the code into JSBin for now until I can get this site updated to serve static files directly.

adds another task to the list

Share this post