Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create ‘Cat CSS Art’. To build this project we would need HTML and CSS. Let’s discover how to build this project in a few simple and easy-to-follow steps.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here:
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 ‘Cat 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 start by creating the container div. The container div has multiple ‘div’ elements which are used to create all the body parts of the cat.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cat CSS Art</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="cat">
<div class="whiskers"></div>
<div class="face">
<div class="ear-l"></div>
<div class="ear-r"></div>
</div>
<div class="tag"></div>
<div class="tail"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we style our Cat using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
Our CSS starts with providing the required styling related to padding, margin, and box-sizing to the root. Then provide a background color to the body and align the container div to the center of the page with proper height and width.
Next, let’s provide styles for our cat. We use the div with class ‘cat’ to keep all the parts of cat together and then we create the neck, neckband and legs using the ‘before’ and ‘after’ pseudo-elements. Further for body parts, each body part has common CSS related to alignment, background color, and sizing.
For the cat’s body parts, we start with styling the cat’s face, and whiskers. We create the face using the div element with class ‘face’ and we use the ‘before’ and ‘after’ pseudo-elements to create the eyes of our cat. We need three whiskers hence we use the ‘before’ and ‘after’ elements for whiskers as well. Finally, we provide styling for ears, tag, and tail to complete our cat.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5b400;
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.cat {
background-color: #000000;
height: 5em;
width: 12.5em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 18.75em;
border-radius: 0 2.18em 0 0;
}
.cat:before {
content: "";
position: absolute;
height: 1.87em;
width: 1.75em;
background-color: #000000;
border-radius: 0 0 1.25em 1.25em;
bottom: -1.18em;
box-shadow: 3.75em 0 #000000, 7.18em 0 #000000, 10.75em 0 #000000;
}
.cat:after {
content: "";
position: absolute;
height: 6.25em;
width: 7.5em;
background: linear-gradient(#f52d00 1.87em, #000000 1.87em);
bottom: 4.93em;
}
.face {
position: absolute;
background-color: #000000;
height: 7.5em;
width: 15em;
bottom: 11.18em;
left: -3.62em;
border-radius: 3.75em;
}
.face:before {
position: absolute;
content: "";
height: 3.75em;
width: 5em;
background-color: #ffffff;
border-radius: 1.87em;
left: 1.87em;
top: 1.56em;
box-shadow: 6.25em 0 #ffffff;
}
.face:after {
position: absolute;
content: "";
height: 2.5em;
width: 1.56em;
background-color: #000000;
top: 2.18em;
left: 3.56em;
border-radius: 0.93em;
box-shadow: 6.25em 0 #000000;
}
.whiskers,
.whiskers:before,
.whiskers:after {
position: absolute;
height: 0.62em;
width: 18.75em;
background-color: #000000;
border-radius: 0.31em;
}
.whiskers {
bottom: 15em;
left: -5.5em;
}
.whiskers:before {
position: absolute;
content: "";
transform: rotate(14deg);
}
.whiskers:after {
position: absolute;
content: "";
transform: rotate(-14deg);
}
.ear-l {
height: 0;
width: 0;
border-bottom: 3.12em solid #000000;
border-left: 1.56em solid transparent;
border-right: 1.56em solid transparent;
position: absolute;
bottom: 7.37em;
left: 3.12em;
}
.ear-l:before,
.ear-r:before {
position: absolute;
content: "";
height: 0;
width: 0;
border-bottom: 1.37em solid #f52d00;
border-left: 0.75em solid transparent;
border-right: 0.75em solid transparent;
left: -0.68em;
top: 1.56em;
}
.ear-r {
height: 0;
width: 0;
border-bottom: 3.12em solid #000000;
border-right: 1.56em solid transparent;
border-left: 1.56em solid transparent;
position: absolute;
bottom: 7.37em;
left: 8.75em;
}
.tag {
position: absolute;
height: 1.87em;
width: 1.87em;
background-color: #f5b400;
border-radius: 50%;
z-index: 1;
bottom: 7.43em;
left: 2.81em;
}
.tail {
width: 3.75em;
height: 1.25em;
background-color: #000000;
position: absolute;
left: 10.62em;
top: 1.87em;
}
.tail:before,
.tail:after {
position: absolute;
content: "";
height: 1.87em;
width: 1.87em;
border: 1.25em solid #000000;
}
.tail:before {
border-left: none;
bottom: 0;
left: 3.12em;
border-radius: 0 3.12em 3.12em 0;
}
.tail:after {
border-right: none;
bottom: 3.12em;
left: 1.25em;
border-radius: 3.12em 0 0 3.12em;
}
@media screen and (min-width: 600px) {
.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.
