HomeCSSZombie CSS Art

Zombie CSS Art

Hey everyone. Welcome to today’s tutorial. This is a Halloween special tutorial. In today’s tutorial, we will learn how to create a zombie art. To create this illustration we need HTML and CSS.
In real-world applications, such illustrations are mainly created using SVG. The only reason we are building this illustration project is to explore and study different CSS properties. We study how different values and properties work.
 
This is a beginner-friendly tutorial. If you are interested in improving your CSS knowledge through more tutorials like this one check out this playlist here. This playlist consists of a bunch of art created with pure CSS.

Video Tutorial:

If you prefer to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.

 

Project Folder Structure:

Now before we start coding let us create the project folder structure. We create a project folder called – ‘Zombie CSS Art’. Within this folder, we have two files. These files are index.html and style.css. The first file is the HTML document and the second one is the stylesheet.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document. In our code, HTML consists of multiple divs inside the main div with the class name – ‘container’. The container div encloses all the elements and centres the art.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Zombie Art</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container center">
      <div class="ear center"></div>
      <div class="zombie center">
        <div class="brain"></div>
        <div class="eyes"></div>
        <div class="mouth"></div>
      </div>
    </div>
  </body>
</html>

CSS:

Next, we shape the elements created with HTML using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #5b2d80;
}
.center {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.container {
  width: 37.5em;
  height: 37.5em;
}
.zombie {
  background-color: #75bc83;
  height: 32.5em;
  width: 23.75em;
  border-radius: 11.87em;
  box-shadow: inset 4.37em 0 rgba(39, 158, 92, 0.5);
}
.zombie:before {
  position: absolute;
  content: "";
  height: 2.5em;
  width: 2.5em;
  background-color: #83c65d;
  border-radius: 50%;
  top: 7.18em;
  left: 6.87em;
  box-shadow: -3.75em -2.18em 0 0.62em #83c65d, -2.5em 2.81em 0 0.31em #83c65d;
}
.brain {
  height: 15em;
  width: 15em;
  background-color: #5b2d80;
  position: absolute;
  right: -3.12em;
  top: -5em;
  border-radius: 50%;
  overflow: hidden;
}
.brain:before {
  position: absolute;
  content: "";
  background-color: #f96eb3;
  height: 15.62em;
  width: 15.62em;
  border-radius: 50%;
  top: 5.62em;
  right: 4.37em;
  box-shadow: inset 9em -8.12em #d83a6f;
}
.eyes,
.eyes:before {
  position: absolute;
  height: 6.25em;
  width: 1.87em;
  background-color: #2a2d49;
  border-radius: 2.5em;
}
.eyes {
  transform: rotate(-45deg);
  top: 13.75em;
  left: 6.25em;
  box-shadow: 6.87em 6.87em #2a2d49;
}
.eyes:before {
  content: "";
  transform: rotate(90deg);
  box-shadow: 6.87em -6.87em #2a2d49;
}
.mouth {
  position: absolute;
  background-color: #2a2d49;
  height: 5em;
  width: 10.62em;
  transform: translateX(-50%);
  left: 50%;
  top: 22.5em;
  border-radius: 3.12em 3.12em 0 0;
}
.mouth:before {
  content: "";
  position: absolute;
  height: 3.43em;
  width: 7.5em;
  background-color: #f96eb3;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  border-radius: 3.43em 3.43em 0 0;
  box-shadow: inset 3.12em 0.62em #d83a6f;
}
.mouth:after {
  position: absolute;
  content: "";
  height: 2.5em;
  width: 1.875em;
  background-color: #f96eb3;
  bottom: -2.5em;
  right: 1.56em;
  border-radius: 0 0 1.56em 1.56em;
}
.ear {
  height: 7.5em;
  width: 31.25em;
  background-color: #279e5c;
  border-radius: 6.25em;
}
.ear:before,
.ear:after {
  position: absolute;
  content: "";
  height: 1.25em;
  width: 2.5em;
  border-radius: 2.5em 2.5em 0 0;
  border: 0.9em solid #0c843d;
  border-bottom: none;
  top: 2.5em;
}
.ear:before {
  transform: rotate(45deg);
  left: 0.93em;
}
.ear:after {
  transform: rotate(-45deg);
  right: 0.93em;
}
@media screen and (max-width: 600px) {
  .container {
    font-size: 12px;
  }
}

That’s it for this tutorial. Your pure CSS zombie art is now ready. If you face any issues while creating this project you can download the source code by clicking on the download button below. Also if you have any queries, suggestions or feedback comment below.
Happy Coding!

Previous articleMCQ – 22/11/22
Next articleMCQ – 24/11/22
RELATED ARTICLES

Tooltips With CSS

Cowboy CSS Art

LEAVE A REPLY

Please enter your comment!
Please enter your name here

two + thirteen =

Most Popular

Truncate Text App Javascript

Tooltips With CSS

Cowboy CSS Art