* Queue Happy Birthday x Stevie Wonder *
Last year I had the pleasure of NOT having a Pandemic birthday, this year I wasn’t so lucky. In 2020, I was able to spend my special day surrounded by loved ones in Mexico, which was truly an experience for many reasons. Although, my birthday this year wasn’t as epic, I still deserved a Birthday Cake… so I made one… out of CSS.
Life after bootcamp has been quite the journey and I’ve had the overwhelming urge to bury my head back into old projects. However, out of everything I learned during my time, I never really had the chance to play with HTML and CSS. What better way to get familiar with all the great things they are capable of than by creating art? That’s what I did. First, I searched for cakes made with HTML & CSS and came across the faithful CodePen version.
Codepen.io is great for finding snippets of code that create what you’re looking for. Although it’s easy to copy and paste, that defeats the purpose of my learning. I examined the code to see exactly how they went about structuring the HTML only to find out, they took it layer by layer. Just like a real cake. Know that, for this story, I’ll only be going over a few of these layers so that you can try it out on your own and create the ten layer cake you deserve.
Step One: Code Your Layers
For a simple cake, you won’t need much. For now, our cake is going to be the only item on our page so a plate should help it not look as though it’s floating in space. This also gives us a good starting point to build everything else on top of. I like a multi-layer cake so we’ll do three layers for that with frosting and of course a candle with a flame. Sounds like a lot but to be honest, it’s a lot more simple than to code in HTML.
My index.html file looked something like this:
As you see, the cake needs to be broken down into a few more parts, like the multiple “drips” and “flame”. You may also notice that the cake is built from the bottom up (makes sense) but we adjust here so that our code overlaps itself more appropriately.
I used the <div> element here because it keeps all of my layers, basic, for a lack of a better term. The use of <h1> tags or <p> or anything else for that matter would leave you with a lot more to adjust within your CSS code. In the words of Childish Gambino, “that’s unnecessary”.
“Why though? Cause I said so.” — Childish Gambino
Step Two: Time for some CSS
We’ll start with the cake itself here. In our HTML you’ll see we added classnames to our three layers. Each start with “layer” and next they have a specified “layer-bottom/middle/top”. This way we can give all layers some general CSS and then specify exactly how and where we want each one to sit.
Our CSS looks like this:
… and our sponge cake is very simple oval, like so;
The position property is set to absolute which positions it to it’s nearest relative, in our case the plate (not shown in this photo). What makes this an oval as opposed to a square is the border-radius property. Setting that at 50% gives us the curvature that we need.
We use the top property on every individual layer to place them where we want to give the appearance of an actual cake.
Step Three: What’s a cake without frosting?
Any birthday cake of mine, needs to have frosting.
As you can see, it’s pretty much the same code we seen on the cake layers. The only things that are tweaked are the pixel numbers so that we can align it to the top.
That’s not so fancy though, is it? Let’s change that with the “drips” we added to our HTML.
The drip classes look a little familiar except for the transform properties. Also, just know that the border radius properties we applied are what allows us to only have the curve near the bottom of the drip, because… gravity. The transform property here helps add more distortion to our drips.
If you follow similar usage while baking your own CSS cake, you’ll have a lot of fun while gaining more knowledge of some basic CSS properties. Who knows what code magic you can make out of a simple idea and a special day.
My final birthday cake:
