Not-So-Spooky Ghost with HTML and CSS

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:

The Markup

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
Copy code
<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.

The Ghost Body

Let's first define some color variables that we'll use throughout the article.

SCSS
Copy code
$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
Copy code
.ghost {
  //1
  position: relative;
  width: 150px;
  height: 225px;
  background: $white;
  //2
  box-shadow: -17px 0px 0px $grey inset, 0 0 50px #5939db;
  //3
  border-radius: 100px 100px 0 0;
}

Let's consider the styles above:

With these styles applied, we get the following result:

The Eyes

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
Copy code
&__eyes {
  //1
  display: 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!

The Dimples

Let's take the same approach with the dimples and use Pseudo-Elements for the dimples.

SCSS
Copy code
&__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%;
  }
}

The Feet

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
Copy code
&__feet {
  width: 100%;
  //1
  position: absolute;
  bottom: -13px;
  //2
  display: flex;
  justify-content: space-between;

  &-foot {
    //3
    width: 25%;
    height: 26px;
    border-radius: 50%;
    background: $white;

    //4
    &:last-child {
      background-image: linear-gradient(to right, $white 55%, $grey 45%);
    }
  }
}

The Shadow

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
Copy code
.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
Copy code
.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
Copy code
@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
Copy code
.shadow {
  ...
  animation: shadow 2s infinite;
}

And finally, define a keyframes animation that changes the scale of the shadow element.

SCSS
Copy code
@keyframes shadow {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }
}

Conclusion

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 TwitterTwitter!