Hi everyone. Welcome to another new tutorial by Coding Artist. In this tutorial, we explore how to create a ‘Monkey’ using CSS. To build this project we need HTML and CSS art. Get ready to learn something fun and exciting today. Do not forget to check out this playlist here which includes numerous projects based on HTML, CSS, and Javascript to improve your skills.
Video Tutorial:
If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Monkey CSS Art’. Inside this folder, we have two files. These files are index.html and style.css.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file. We create a div for each part of the monkey’s body and then style it using CSS later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monkey CSS Art</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="shadow"></div>
<div class="ear-r"></div>
<div class="hand-r"></div>
<div class="leg"></div>
<div class="tail"></div>
<div class="tail-end"></div>
<div class="monkey">
<div class="ear-l"></div>
<div class="hand-l"></div>
<div class="eye">
<div class="eye-ball"></div>
</div>
<div class="eyebrow"></div>
<div class="mouth"></div>
<div class="nose"></div>
</div>
</div>
</body>
</html>
Â
CSS:
Next, we style our button using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
We begin with aligning the container to the center. Each part of the monkey has CSS for size, alignment, background color, and border-radius for curved parts. For creating the monkey we first create the face, then the body using the ‘before’ pseudo-element, and the hair on top of his head using the ‘after’ pseudo-element. Each of these has to be aligned properly to make sense.
Then we create ears, the left ear has two parts the inner which is created using a background color, and the outer which is created using a border while the right ear is simply dark. Then hands are again divided into two parts, the bottom part is created using the ‘before’ pseudo-element and the upper part is the div.
The leg has a linear gradient background to display it as two instead of one. Then we build the tail which needs us to use both the ‘before’ and ‘after’ pseudo-elements to carefully create a curve. After this, we create the eyes, nose, and mouth. Finally, we create a shadow for our monkey which is a curved div with a darker background than the container.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f8d11d;
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.monkey {
background-color: #6e4238;
width: 7.5em;
height: 12.5em;
position: absolute;
transform: translate(-50%, -50%);
left: calc(50% + 3.12em);
top: 50%;
border-radius: 7.5em 7.5em 3.75em 0;
}
.monkey:before {
position: absolute;
content: "";
height: 5em;
width: 6.25em;
background-color: #6e4238;
left: -6.18em;
bottom: 0;
border-radius: 5em 0 0 5em;
}
.monkey:after {
position: absolute;
content: "";
height: 1.87em;
width: 0.93em;
background-color: #6e4238;
border-radius: 0.93em 0 0 0.93em;
top: -0.62em;
left: 2.5em;
box-shadow: 1.18em -0.31em 0 0.25em #6e4238;
}
.ear-l {
box-sizing: content-box;
position: absolute;
background-color: #431d15;
height: 1.25em;
width: 1.25em;
border-radius: 50%;
border: 0.62em solid #6e4238;
left: -1.56em;
top: 1.56em;
}
.ear-r {
position: absolute;
background-color: #431d15;
height: 1.87em;
width: 1.87em;
border-radius: 50%;
top: 11.06em;
left: 21.25em;
}
.hand-l {
background-color: #955b51;
height: 7.5em;
width: 4.37em;
position: absolute;
top: 6.87em;
right: 4.37em;
border-radius: 1.25em 0.62em 1.87em 0;
}
.hand-l:before {
position: absolute;
content: "";
height: 1.25em;
width: 1.25em;
background-color: #f6be9c;
left: -1.25em;
bottom: -0.06em;
border-radius: 0.31em 0 0 1.25em;
}
.hand-r {
background-color: #431d15;
height: 7.5em;
width: 4.37em;
top: 16.12em;
left: 19.06em;
border-radius: 0.62em 0.62em 1.87em 0;
position: absolute;
}
.hand-r:before {
position: absolute;
content: "";
height: 1.25em;
width: 1.25em;
background-color: #f6be9c;
left: -0.93em;
bottom: 0;
border-radius: 0.31em 0 0 1.25em;
}
.leg {
height: 3.12em;
width: 2.5em;
background: linear-gradient(to right, #5f382e 70%, #431d15 70%);
position: absolute;
top: 20.31em;
left: 10em;
}
.tail {
height: 0.62em;
background-color: #431d15;
width: 1.87em;
position: absolute;
left: 7.5em;
top: 20em;
}
.tail:before,
.tail:after {
position: absolute;
content: "";
background-color: transparent;
height: 0.93em;
width: 1.87em;
border: 0.62em solid #431d15;
}
.tail:before {
border-radius: 1.25em 0 0 1.25em;
border-right: none;
left: -1.87em;
}
.tail:after {
border-radius: 0 1.25em 1.25em 0;
border-left: none;
left: -0.62em;
top: 1.5em;
}
.tail-end {
height: 0.62em;
background-color: #431d15;
width: 3.75em;
position: absolute;
top: 23em;
left: 3.75em;
border-radius: 0.62em;
}
.eyebrow {
height: 0.43em;
width: 3.75em;
background-color: #000000;
position: absolute;
top: 1.25em;
left: 2.81em;
border-radius: 0.43em;
}
.eye {
height: 0.78em;
width: 1.56em;
background-color: #ffffff;
border-radius: 0 0 0.78em 0.78em;
position: absolute;
top: 1.62em;
left: 3.12em;
box-shadow: 1.37em 0 #ffffff;
}
.eye-ball {
position: absolute;
height: 0.25em;
width: 0.25em;
background-color: #000000;
border-radius: 50%;
top: 0.18em;
left: 0.56em;
box-shadow: 1.37em 0 #000000;
}
.mouth {
position: absolute;
width: 4.37em;
height: 1.87em;
border-radius: 1.87em;
border: 1.25em solid #f6be9c;
top: 4.37em;
left: 2.5em;
}
.mouth:before {
content: "";
position: absolute;
height: 0.31em;
width: 1.25em;
background-color: #ffffff;
top: -0.12em;
left: 0.31em;
border-radius: 0.31em;
}
.nose {
position: absolute;
height: 2.5em;
width: 2.5em;
background-color: #ef425f;
border-radius: 50%;
top: 2.81em;
left: 2.5em;
box-shadow: 1.87em 0 #ef425f;
}
.nose:before {
position: absolute;
content: "";
height: 0.93em;
width: 0.93em;
background-color: #a92a40;
border-radius: 50%;
top: 0.75em;
left: 0.75em;
box-shadow: 1.87em 0 #a92a40;
}
.shadow {
background-color: #ffa303;
height: 2.5em;
width: 26.25em;
border-radius: 1.25em;
position: absolute;
transform: translateX(-50%);
top: 22.5em;
left: 50%;
}
@media screen and (min-width: 800px) {
.container {
font-size: 1.2em;
}
}
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Now all you have to do is extract the files from the zipped folder.
