Not-So-Spooky Ghost with HTML and CSS
October 30, 2020
Get in the Halloween spirit (ha 👻) by making this not-so-spooky ghost with some HTML and a few lines of CSS!
Open up your favorite IDE or follow along on CodePen!
Here's the final result:
Before I begin, I like to consider the end-result in terms of shapes, and how I'm going to structure the markup in a way I can utilize CSS to get the results I want.
Let's think it through:
The ghost has a capsule-like body
The ghost has two round eyes
The ghost has two round dimples
The ghost has some circles at the bottom to give the effect of a wavy-bottom of the body
A shadow is present at the bottom of the ghost to aid in the hovering effect
Each of these items can be translated to
divs with appropriate class names applied.
Now that we've created the structure (markup) of the ghost, let's start styling.
The Ghost Body
Let's first define some color variables that we'll use throughout the article.
📢 I'm using SCSS, but you can use regular CSS variables, too.
Now that we have the colors defined, let's work on the ghost body.
Let's consider the styles above:
Even at this early stage, we can assume that we're going to need to position elements absolutely in the future, so we set the ghost's body as the anchor point. This will help us later.
Did you know you can use multiple box-shadows on the same element? Well, now you do! The box shadow is doing two things. First, it's giving us the grey inner shadow inside the ghost body (which is why we set it to
inset). Second, we can use it to give us a nice glow around the ghost.
How do we get the capsule-like design without effecting the bottom of the element? The
border-radiusproperty can take optional arguments so you can change the radius of different sides of the element.
With these styles applied, we get the following result:
Let's now look at (ha 👀 ) the eyes of the ghost.
Because I'm using SCSS to style, I have the ability to nest my styles.
A few things to note about the styles above:
I've decided to use the
ghost__eyesdiv as the container for both eyes. This means I'll position this container appropriately inside the ghost body.
What about the actual eyes? Instead of created a div for each individual eye, I've decided to use Pseudo-Elements and style them appropriately. This helps reduce unneeded markup.
We've got some eyes now!
Let's take the same approach with the dimples and use Pseudo-Elements for the dimples.
We're making some good progress! Let's now make the bottom of the ghost by creating a few circles and positioning them correctly.
Remember how we set
position: relativeup above in the ghost body? Here's they payoff. We want to place these feet at the bottom of the ghost body, so
position: absoluteis our friend here.
The feet need to be side-by-side and flexbox is one way to achieve that.
Because there are 4 feet total, each foot should take up 25% of the given width.
Finally, we target the last foot and use
linear-gradient()to change the background color from
greyin the middle of the element. This continues the illusion of the inner shadow that we set in the ghost body.
Our little ghost is pretty much done! Let's quickly style the shadow!
There's nothing fancy going on here, we apply the color, size and position correctly.
To wrap up, let's bring this little guy to life by using CSS animations!
Back up where we styled the ghost body, include an
animation property. We'll create the actual keyframes animation next.
Next, define a keyframes animation called
float. At the beginning and end of the animation (0% and 100%), the ghost should be at the initial starting position. Half way through the animation (50%), we want the ghost to be positioned slightly above the starting position.
Great! The ghost now floats up and down and repeats infinitely!
To make the floating illusion more convincing, we can apply another animation on the shadow itself!
animation property to the styles on the shadow.
And finally, define a keyframes animation that changes the scale of the shadow element.
And there we go! CSS Art is always so much fun to make and it's a great way to challenge yourself and learn new things.