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!
