A Very Merry Reindeer Christmas

A Merry Reindeer Christmas

Christmas is here, snow is in the air and Santa is on his way. While I wait patiently for Old Saint Nic to fill my stocking, I decided to check out some CSS Christmas tutorials online. One that tutorials that really stood out for me was by dodozhang21. dodozhang21 put together a pixelated Christmas tree with blinking lights. It was pretty impressive so I decided to try it for myself, but with my own Christmas twist. Instead of doing a Christmas tree, I wanted to do all 9 reindeer.

But first I had to figure out exactly how dodozhang21 had made the tree.

Reverse Engineering a Christmas tree

First, dodozhang21 made a single element named "xmasTree" that was 1em by 1em in size. dodozhang21 then used CSS's box shadows to make boxes also 1em by 1em in size, and tiled them in different colours to make the tree. The final touch was using CSS animations to make the lights flicker.

The background animation was a URI string that made the snowflakes, which is actually pretty impressive!

The star on top was from the FontAwesome iconic set, which was a little sad to see because one can easily make a CSS star. But, the Christmas tree is pretty impressive and took a lot of creativity so I will cut him some slack for being lazy on the star.

Now that we know how dodozhang21 made the tree, we have to use the same process in making some reindeer.

Getting Started

I'm no artist, so I had to find a clip-art of a reindeer online. I found a simple one, popped it into Photoshop and pixelated it. To do this I went to Filter > Pixelate > Mosiac and set the Cell Size to 15. This gave me a very pixelated reindeer. I then placed guides on it and seperated it into "pixels" so I could colour my own reindeer exactly the same.

Pixelated reindeer Reindeer with grids

I started off with a single box, 16px by 16px wide. I then began placing the shadow boxes. Quickly I discovered I was making a lot more work for myself than I needed. Each pixel would be located at a multiple of 16px somewhere on the grid. I could calculate this all myself, or I could use CSS variables and calc() to do this instead. That transformed something like this:

To something much more easily managed like this:

I also chose note to include pixels that had no background colour, since I wanted to put a background colour behind the whole thing.

First Version

After manually adding all the pixels, I had my final product. It looked just like the pixelated reindeer from Photoshop, but it didn't look as crisp looking as I wanted.

First version of reindeer

I decided to trim some of the reindeer fat and simply the colours further. Some of the colours were shades of white or shades of brown, so I decided to remove them and use only a half dozen colours. I also took away the red glow from the reindeer's nose since only 1 of the 9 reindeer having a glowing nose (don't worry, it'll come back).

New Reindeer

The Whole Gang Is Here

Now that we have one reindeer, we need the other 8. After all, pulling Santa's sleigh is a team effort. I placed all the reindeer inside a wrapper so we could move them around. I also added spacing between them because, although the reindeer looks big, they're actually only 16px by 16px in size. If I didn't add space, they would overlap awkwardly.

Let it Snow

Now that we have all the reindeer, we have to add some heavy snow. We are going to copy dodozhang21's code exactly for this because it was ingenious.

Let it Glow

Now that we have a heavy snowstorm, we need Rudolph to light our way. We are going to move all our box-shadow styles into a CSS animation and set the animation fill mode to "forwards". We will pause the animation, and set up a second animation for Rudolph's red nose. Once we are done that, we will set Rudolph's animation to play while all the others remain paused. This will leave only him with a glowing red nose:

And now, finally, Santa can deliver his gifts!

Hope you all have a very Merry Christmas. If you enjoyed this tutorial, please share it and leave a comment below.



Sign-up for inside tips for making
your website more beautiful!

* indicates required


Sign-up for inside tips for making
your website more beautiful!

* indicates required