Design Frankenstein Code Art

Use CSS flexbox and keyframe animations to build your own Frankenstein face.

Web DevelopmentHTML/CSS/JSBeginner

August 11, 2020

0 views


Profile image

Shreyasi Patil

Interested in this project?

Continue Learning

Introduction

Learning CSS can be overwhelming at times with many properties to remember. This tutorial will help you break down how CSS art is made.

Getting Started

Visualizing Frankenstein

We need to visualize how exactly we want the CSS art to be. A basic outline of the art will make it easier to add details accordingly. Outline of Frankestein A fast and effective way to make CSS project is by using Codepen, an online editor which let's us code in HTML, CSS, and Javascript without linking the files.

Breaking it Down!

A pure CSS Art consist of several divs in HTML.

The project can be simplified into these components:

  1. HTML div for each shape
  2. CSS classes assigned to each div
  3. Styling each class of CSS
  4. A container div containing the entire face

The Container

We will place the entire CSS image in a class called Container. This will help us move the face accordingly.

    
    <html>
         <body>
           <div class="container">
           </div>
        </body>
    </html>

The HTML

Before we get started,we need to know how divs are positioned. For example, a div2 placed below div1 will overlap div1. To understand this we can think of the divs in form of layers. As given in the image, the rectangular face will be first layer. Let's name it Layer 0. The next part, Layer 1, will consist of the eyes, nose, mouth, and hair. Layer 2 will consist of more details like the eyeball, triangular shape of hair, etc. Here Layer 2 will be placed over Layer 1.

Lets create the divs!

<html>

<body>                    
  <div class="container">
      <div class="face">    
        <div class="eyes">  
          <div class="eye-left">
            <div class="eye-ball"></div>
          </div>
          <div class="eye-right">
            <div class="eye-ball"></div>
          </div>
          <div class="nose"></div>
          <div class="mouth"></div>
        </div>
        <div class="scratch">
          <div class="a left"></div>
          <div class="a center"></div>
          <div class="a right"></div>
        </div>
        <div class="hair">
          <div class="flick1"></div>
          <div class="flick2"></div>
          <div class="flick3"></div>
          <div class="flick4"></div>
          <div class="flick5"></div>
        </div>
        <div class="nail lft">
          <div class="nail1"></div>
        </div>
        <div class="nail rgt">
          <div class="nail2"></div>
        </div>
      </div>
  </div>
</body>

</html>

The CSS

Here comes the fun part! Let's design layer by layer.

Layer 0

We will style body, container and face classes in this layer.

body {
  background: #44626f;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  text-align: center;
}
.face {
  width: 230px;
  height: 260px;
  background: #73a552;
  position: absolute;
  top: 25vh;
  left: 35vw;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-left-radius: 35%;
  border-bottom-right-radius: 35%;
  z-index: 1000;
}

Here in body, we set background color to #44626f, display to flex so that we can set justify-content to center.

The values of width , height , position and border-radius can be determined by experimenting. With practice, you will be able to figure it out.

Layer0

Layer 1

We have eyes, eye-left, eye-right, scratch, mouth, nose, and hair in this layer. Let's also style these with CSS!

.eyes {
  width: 170px;
  height: 45px;
  background: #556839;
  position: absolute;
  top: 100px;
  left: 30px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.eye-left {
  width: 55px;
  height: 35px;
  background: white;
  left: 20px;
  position: absolute;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}
.eye-right {
  width: 55px;
  height: 35px;
  background: white;
  left: 95px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}
.eye-brow {
  width: 35px;
  height: 20px;
  background: #1e201f;
  left: 10px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}
.nose {
  width: 50px;
  height: 15px;
  border-top: 7px solid #556839;
  position: absolute;
  border-radius: 50%;
  top: 75px;
  left: 60px;
}
.mouth {
  width: 65px;
  height: 30px;
  position: absolute;

  border-top: solid 6px #546837;
  border-radius: 50%;
  top: 110px;
  left: 65px;
}
.scratch {
  width: 90px;
  height: 5px;
  background: #536936;
  position: absolute;
  top: 60px;
  left: 15px;
  border-radius: 25px;
}
.hair {
  width: 250px;
  height: 60px;
  background: black;
  position: absolute;
  left: -10px;
  top: -40px;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
}

Layer1 Our Frankenstein looks a bit scary at this point, Layer 2 is where the magic happens!

Layer 2

Layer 2 is the most important layer as all the detailed work is done here. Let's add the final details.

.eye-ball {
  width: 35px;
  height: 20px;
  background: #1e201f;
  left: 10px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}
.a {
  height: 35px;
  width: 4px;
  border-radius: 25px;
  position: absolute;
  background: #546737;
  top: -16px;
}
.left {
  left: 15px;
}
.center {
  left: 40px;
}
.right {
  left: 65px;
}
.flick1 {
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  width: 70px;
  height: 50px;
  background: black;
  position: absolute;
  top: 40px;
  left: 0px;
}
.flick2 {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  width: 80px;
  height: 50px;
  background: black;
  position: absolute;
  top: 45px;
  left: 30px;
  border-radius: 15px;
}
.flick3 {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  width: 80px;
  height: 50px;
  background: black;
  position: absolute;
  top: 45px;
  left: 90px;
}
.flick4 {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  width: 80px;
  height: 50px;
  background: black;
  position: absolute;
  top: 45px;
  left: 150px;
}
.flick5 {
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  width: 70px;
  height: 50px;
  background: black;
  position: absolute;
  top: 40px;
  left: 180px;
}
.nail {
  height: 30px;
  width: 30px;
  background: #979b90;
  position: absolute;
  z-index: 999;
}
.lft {
  top: 156px;
  left: -29px;
}
.rgt {
  left: 229px;
  top: 156px;
}
.nail1 {
  width: 20px;
  height: 45px;
  background: #979b90;
  top: -8px;
  position: absolute;
  border-radius: 5px;
}
.nail2 {
  width: 20px;
  height: 45px;
  background: #979b90;
  top: -8px;
  position: absolute;
  border-radius: 5px;
  left: 10px;
}

The triangular shape of hair (flick) can be made using Clippy.

Clippy is a handy tool to make shapes as well as custom shapes too. Frankenstein is ready! Layer 2

Let's Animate!

We will make the eye-balls move. This can be achieved using animation property and @keyframes.

.eye-ball {
  width: 35px;
  height: 20px;
  background: #1e201f;
  left: 10px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  animation: roll 5s 3;
  animation-delay: 10s;
}
@keyframes roll {
  0% {
    left: 10px;
  }
  10% {
    left: 10px;
  }
  30% {
    left: 0px;
  }
  55% {
    left: 20px;
  }
  70% {
    left: 0px;
  }
  100% {
    left: 10px;
  }
}

Imgur

That's it! Share what you have made, or try your own work of art!

Comments (0)