Who knew you could draw a rat using just CSS? Here your browser becomes the canvas, and your code becomes the brush.
In this tutorial, we will see how to draw a rat using HTML and CSS. You only need some basic HTML and CSS knowledge to draw. Even if you are new to CSS art, you can start with simple HTML <div> elements and CSS styling.
What Makes CSS Art Special
CSS Art is created using only HTML and CSS. There are no image files or design software required. You create shapes with HTML div elements and style them with CSS to create a complete image.
It's not a practical method for websites, but it is the best way to practice CSS and learn new techniques. Think of it as a fun way to improve your coding skills.
The Confession
The rat drawing shown in today's tutorial won't be useful in real life. However, this tutorial will teach you how to use CSS properties correctly. So let's experiment with new CSS properties and see how they can be used.
If you are new to web development, then today's tutorial might be confusing for you. We have explained every topic step by step, but a little familiarity with HTML and CSS will still help you follow along more easily.
Here's what we will be making:
In the windows below, you can see the final result we'll be creating. Click the Run Code button to view the drawing.
First, create a project folder. If you are unsure how to make one, don't worry - just read this article: How to structure an HTML project.
Here is the HTML structure of the rat
Just like an artist sketches the basic structure of a drawing with a pencil, we have first created an HTML structure for our rat illustration. Each part of the rat is represented using separate <div> elements.
Each of these div elements is given a class name based on the rat body part. This makes it easier to style and draw the rat using CSS.
Place the following code inside the HTML document <body> section.
<div class="rat">
<div class="body">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
<div class="nose"></div>
<div class="hair left">
<div></div>
<div></div>
</div>
<div class="hair right">
<div></div>
<div></div>
</div>
</div>
<div class="tail"></div>
</div>The purpose of each part of the rat structure is explained below.
Rat container
<div class="rat">This element contains the entire rat structure, and its class name is rat.
Rat ears and eyes
<div class="ear left"></div>
<div class="ear right"></div>
These two elements are used to form the rat ears. Both have the class name ear, and each ear also gets an extra class right or left to position them correctly.
<div class="eye left"></div>
<div class="eye right"></div>
Just like the ears, these two elements are used to draw the rat eyes.
Rat nose
<div class="nose"></div>This element is used to drow the rat nose.
Rat whiskers
<div class="hair left">
<div></div>
<div></div>
</div>
<div class="hair right">
<div></div>
<div></div>
</div>
Rat wouldn't look complete without whiskers. That's why we added two elements, named hair left and hair right, to create whiskers on both sides of the face.
Rat tail
<div class="tail"></div>The final element is the rat tail. It sits inside the main rat element but outside the body section.
Here is a rat drawing using CSS
Each CSS step is broken down and explained below.
Step 1: Document body setup
Place the rat in the center of the document body.
body {
display: grid;
place-items: center;
min-height: 100vh;
background: #e5e5e5;
}Here the document body is styled, and we have turned it into a grid container. Using the place-items: center; property, all elements inside the body are centered both vertically and horizontally.
This technique is called the grid centering method, and it is one of the easiest ways to center any element. To ensure the rat structure stays perfectly centered, we also set min-height: 100vh. Since 100vh represents the full height of the browser window, the body now covers the entire viewport.
Then the background color of the document body is given the hex code #e5e5e5, which is a light gray color.
Step 2: Positioning the Rat
.rat {
position: relative;
}We applied position: relative to the rat container. This allows us to position the elements inside it correctly, without affecting the layout outside the container.
Step 3: Drawing the Rat Body
.body {
position: relative;
width: 200px;
height: 300px;
background: white;
border: 4px solid black;
z-index: 5;
border-radius: 50%;
box-shadow: inset 0px -2px 0px 2px #aeaeae;
}To create a cartoon-style rat, we are designing the body in the shape of a computer mouse. For this, we have set the body height to 300px and width to 200px.
We then give the rat body a white background and add a 4px thick black border to outline the shape. To position the body above the tail, we apply z-index: 5, so that it is above the tail element.
We use border-radius: 50% to fully round the corners of the rat body. Then, a box-shadow is applied to cast a soft inner shadow, which makes the body look more 3D.
Step 3: Drawing the Rat Ears
The ear class is used to create both ears of the rat. Each ear is given a width and height of 100 pixels, and border-radius: 50% makes the shape a circle.
.ear {
position: absolute;
top: 35%;
width: 100px;
height: 100px;
background: white;
border-top: 4px solid black;
border-bottom: 4px solid transparent;
border-left: 4px solid black;
border-right: 4px solid black;
border-radius: 50%;
box-shadow: inset 0px 0px 0 3px #fff, inset 1px 20px 0px 0px #aeaeae;
}Next we add a border to create the outline of the ear. Notice that the border-bottom is set to transparent, which helps create a curved look.
A soft 3D effect is created using box-shadow. The inset shadow makes the ears look round and gives them depth.
.ear.left{
left: -25px;
transform: rotate(310deg);
}
.ear.right{
right: -25px;
transform: rotate(50deg);
}To place the ears on opposite sides, two additional classes ear left and ear right are used. The left ear is shifted to the left with left: -25px and rotated slightly using transform: rotate(310deg).
Similarly, the right ear is moved to the right with right: -25px and rotated with transform: rotate(50deg).
Step 3: Drawing the Rat Eyes
.eye {
position: absolute;
top: 75%;
width: 15px;
height: 20px;
background: black;
border-radius: 50%;
}We start drawing the eyes using the eye class, which styles both eyes together. To position them correctly, we use position: absolute; and set top: 75%;, which places the eyes 75% below the top of the rat head.
.eye.left{
left: 55px;
}
.eye.right{
right: 55px;
}To space the eyes evenly, we set the first eye 55px from the left side and the second eye 55px from the right side of the rat body.
.eye:after {
content: "";
top: 35%;
left: 35%;
position: absolute;
height: 4px;
width: 4px;
border-radius: 50%;
background: white;
}The rat eyeball is created using a CSS pseudo-element, which allows us to draw it without inserting any new HTML elements.
Step 3: Drawing the Rat Nose
.nose {
position: absolute;
top: 90%;
left: 45%;
width: 20px;
height: 20px;
background: black;
border-radius: 45%;
}Here the rat nose is drawn. The height and width of the rat nose are 20 pixels. The nose is given top: 90%; and left: 45%; to place it between the eyes. And the background color of the nose is kept black.
The border-radius property is set to 45% to make the rat nose round.
Step 3: Drawing the Rat Whiskers
Here, four hairs are created for the rat face. Using top: 88%, the hairs are positioned 88% down from the top of the rat body.
.hair {
position: absolute;
top: 88%;
}
.hair div{
height: 3px;
width: 100px;
margin-top: 15px;
background: #000;
}Each hair is 3 pixels height and 100 pixels width, making it look like a thin line.
Here, all hairs are placed 15 pixels inside the body.
.hair.left {
left: -15px;
}
.hair.right {
right: -15px;
}In this step, a slight bend is added to the second hair on either side of the rat face.
.hair.left > div:nth-child(2) {
transform: rotate(345deg);
}
.hair.right > div:nth-child(2) {
transform: rotate(15deg);
}Step 3: Drawing the Rat Tail
Here, the rat tail is drawn with a height of 200 pixels and a width of 250 pixels. The background of the body of this element is kept invisible. A border is used to give the shape of the tail.
.tail {
top: -30%;
left: -72%;
position: absolute;
width: 250px;
height: 200px;
border-radius: 50%;
background: transparent;
border-top: 8px solid black;
border-right: 15px solid black;
border-bottom: 10px solid transparent;
box-shadow: inset -3px 4px 0px 0px #aeaeae;
}The tail is created using borders. The top and left borders are solid black, while the bottom border is a 10px transparent line.
Conclusion
Congratulations🎉 You have successfully drawn a complete cartoon-style rat using HTML and CSS. The design is divided into small parts of the mouse such as ears, eyes, nose, whiskers, body and tail
You have learned how to shape and position each element using CSS properties such as position, border-radius, box-shadow and transform.
In this tutorial, you also learned how using absolute positioning, z-index layering can transform simple boxes into works of art. This project shows that CSS isn't just for layout - it can also be a powerful tool for creating images directly in the browser.
Don't hesitate to experiment with colors, shapes, and sizes to give your rat a unique personality. Once you understand the basics, you can create all kinds of CSS art. Keep practicing, keep exploring, and most importantly, have fun coding your creations.
0 Comments