Not-So-Spooky Ghost with HTML and CSS
October 30, 2020
|
βββ views(Updated on February 20, 2022)
October 30, 2020
|
βββ views(Updated on February 20, 2022)
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:
Each of these items can be translated to divs with appropriate class names applied.
HTML<div class="ghost"><div class="ghost__eyes"></div><div class="ghost__dimples"></div><div class="ghost__feet"><div class="ghost__feet-foot"></div><div class="ghost__feet-foot"></div><div class="ghost__feet-foot"></div><div class="ghost__feet-foot"></div></div></div><div class="shadow"></div>
Now that we've created the structure (markup) of the ghost, let's start styling.
Let's first define some color variables that we'll use throughout the article.
SCSS$background: #00034b;$white: #ffffff;$grey: #dbdbdb;$pink: #ffbeff;$shadow: #000232;
Now that we have the colors defined, let's work on the ghost body.
SCSS.ghost {//1position: relative;width: 150px;height: 225px;background: $white;//2box-shadow: -17px 0px 0px $grey inset, 0 0 50px #5939db;//3border-radius: 100px 100px 0 0;}
Let's consider the styles above:
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.
SCSS&__eyes {//1display: flex;justify-content: space-around;margin: 0 auto;padding: 70px 0 0;width: 90px;height: 20px;//2&:before,&:after {content: "";display: block;width: 15px;height: 25px;background: $background;border-radius: 50%;}}
A few things to note about the styles above:
We've got some eyes now!
Let's take the same approach with the dimples and use Pseudo-Elements for the dimples.
SCSS&__dimples {display: flex;justify-content: space-around;margin: 0 auto;padding: 35px 0 0;width: 130px;height: 20px;&:before,&:after {content: "";display: block;width: 15px;height: 15px;background: $pink;border-radius: 50%;}}
We're making some good progress! Let's now make the bottom of the ghost by creating a few circles and positioning them correctly.
SCSS&__feet {width: 100%;//1position: absolute;bottom: -13px;//2display: flex;justify-content: space-between;&-foot {//3width: 25%;height: 26px;border-radius: 50%;background: $white;//4&:last-child {background-image: linear-gradient(to right, $white 55%, $grey 45%);}}}
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.
SCSS.shadow {background: $shadow;width: 150px;height: 40px;margin-top: 50px;border-radius: 50%;}
Animation
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.
SCSS.ghost {...animation: float 2s infinite}
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.
SCSS@keyframes float {0%,100% {transform: translateY(0);}50% {transform: translateY(-15px);}}
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!
Add an animation property to the styles on the shadow.
SCSS.shadow {...animation: shadow 2s infinite;}
And finally, define a keyframes animation that changes the scale of the shadow element.
SCSS@keyframes shadow {0%,100% {transform: scale(1);}50% {transform: scale(0.9);}}
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.
Happy Halloween!
Thanks for reading! If you liked this article and want more content like this, read some of my other articles and make sure to follow me on Twitter!
π
β€οΈ
π
π
Share this article
A periodic update about my life, recent blog posts, how-tos, and discoveries.
No spam - unsubscribe at any time!