Designing a CSS Snowman

Holiday edition of Coding Tip of the Day, and it’s not a tip at all. I tried to build a snowman out of nothing but divs and CSS, then compared mine against the best one on CodePen. The tricks I reached for are the useful part.

The cheatsheet

Serving the folder locally

python -m SimpleHTTPServer 14000

Serves the current folder on port 14000. This is the Python 2 spelling that shipped with macOS at the time; on current Python it’s python3 -m http.server 14000.

Turning a div into a circle

.body li {
  background-color: white;
  border-radius: 50%;
}

The body is a list of three items, and a border-radius of 50 percent turns each square div into a circle.

Overlapping the stacked circles

.body li:nth-child(2) {
  position: relative;
  top: -20px;
}

Three stacked circles sit too far apart by default. nth-child grabs them individually and a negative top pulls them up so they overlap. The same pattern does the buttons, eyes and mouth.

Angling the arms

.arm-right {
  transform: rotate(45deg);
}

The arms are thin divs either side of the body, rotated outward 45 degrees each way.

Faking a triangle for the nose

.nose {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid orange;
}

There’s no triangle in CSS, so you fake one with a zero-sized box and borders. Two transparent, one colored, and the visible border renders as a triangle pointing sideways.

Going further

I did not work the triangle out myself. Chris Coyier’s CSS triangle snippet over at CSS-Tricks is where I got it. Both snowmen are on CodePen, linked in the video description.