You never know when inspiration will strike.
When I began preparing a list of blog topics this week—I kept coming up empty-handed and uninspired. How could this be? Rarely does it occur when I don’t have thoughts or an opinion on design, development, and technology-related topics.
So I did what comes natural to any (Elder) Millennial—I unlocked my phone and started scrolling through social media, texting friends, and listened to music. It wasn’t until I landed in my calendar app that I realized just how close we are to Halloween. This excited me as my wife and I’s plans this year are to surprise our best friends kids with an inflatable T-Rex costume and candy. We have been chatting about it for weeks now and apparently I am just now coming to terms that we are this deep into 2020.
After the quick break—it was time to dive back into writing. Nothing. Total writer’s block…and then it hit me. Directly above my line of sight was a pumpkin decoration my wife had put up the other day.
I briefly pondered what it would take to accomplish making a Jack o’ Lantern with CSS only. This isn’t too out of left field for me—I’ve always admired the creative work on a.single.div and have experimented with a few of my own ideas (CSS Simon). Now it just became a matter of jumping in and writing the CSS.
Initially, my plan was going to be incredibly basic but the more styles I wrote—the more ambitious the task became. After a few hours of tinkering, I felt that my experiment had enough substance to be worthy of a blog post.
My order of operations could be summarized as:
- Place an orange pumpkin div and apply a border radius
- Position the pumpkin into the center of the canvas using display: flex
- Use position: absolute on the stem to not impact the center position of the pumpkin itself
- Leveraged CSS Triangles to build the eyes and nose
- Use overflow:hidden to clip an oval to create a mouth
- Use a gradient with carefully selected stops to create a ground surface and spooky horizon
- Apply gradients to the pumpkin and stem to give it a little more depth
- Use inset box shadows to create shading on the pumpkin itself
- Use a regular box shadow give the pumpkin a bit more dimension
- Position teeth into the mouth, match the colors to the gradient
- Add a second set of triangles to the eyes and nose and a second oval to the mouth create a carved effect
- Identify areas of CSS that could be combined into a single selector for the variables elements
- Create a basic color changing animation to give the pumpkin a glowing appearance
- Use a single animation for the nose and eyes to change the border color (triangle color)
- Use a different animation to change the background color of the mouth
- Apply a slight rotation to the eyes
- Apply a wobble animation to the pumpkin itself
Calculating size proportions for the shapes:
CSS Gradient Generator: