Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a cute koala illustration. To create this illustration we need HTML and Pure CSS.
As I have mentioned in my previous posts, this kind of tutorial might not have any practical use. Yet they are a fun way to experiment and learn various CSS properties. So if you are a CSS beginner or even an intermediate, I recommend you go through this tutorial.
I have a playlist of CSS Art & Illustrations that you can use to further practise your CSS skills. You can check out this playlist here.
Video Tutorial:
If you are interested to learn by watching a video tutorial, rather than reading this blog post, you should check out the video down below. Also, I post new tutorials and resources related to web development regularly on my youtube channel. So be sure to subscribe to my youtube channel so you don’t miss this awesome stuff.
Project Folder Structure:
Now, before we start coding let us take a look at the project folder structure. We create a project folder called – Koala CSS Art. Inside this folder, we have two files. The first file is index.html which is the HTML document. Next, we have style.css which is the stylesheet.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document. With the help of HTML, we create elements that would build the layout for our koala.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Koala CSS Art</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="ear-1"></div>
<div class="branch"></div>
<div class="body"></div>
<div class="ear-2"></div>
<div class="face">
<div class="eye"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we need to style these elements. For this purpose, we use CSS. Once again, copy the code provided to you below and paste it into your stylesheet. With the help of CSS, we position and shape the elements and their corresponding pseudo-elements to make them look like a koala.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #b9e188;
}
.container {
height: 500px;
width: 500px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
/*Branch*/
.branch {
background-color: #7b5319;
width: 90%;
height: 22px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 12px;
}
/* Koala Body */
.body {
background-color: #767677;
height: 100px;
width: 150px;
position: absolute;
top: 150px;
left: 150px;
border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
}
/* Hind leg 1 & Front leg 1*/
.body:before,
.body:after {
content: "";
position: absolute;
background-color: #767677;
height: 70px;
width: 35px;
border-radius: 18px;
}
/* Hind Leg 1 */
.body:before {
top: 60px;
left: 115px;
transform: rotate(-15deg);
}
/* Front leg 1 */
.body:after {
top: 70px;
left: 20px;
}
/* Face */
.face {
position: absolute;
background-color: #8f8d8f;
height: 115px;
width: 115px;
top: 150px;
left: 88px;
border-radius: 50%;
}
/* Ear left and Ear right*/
.ear-1,
.ear-2 {
background-color: #efd8db;
height: 38px;
width: 38px;
border-radius: 50%;
position: absolute;
}
/* Ear right */
.ear-2 {
box-shadow: 0 -5px 0 12px #a9a9ac;
top: 135px;
left: 172px;
}
/* Ear left */
.ear-1 {
box-shadow: -3px -5px 0 12px #a9a9ac;
top: 205px;
left: 65px;
}
/* Front leg 2 and Hind leg 2*/
.ear-1:before,
.ear-1:after {
position: absolute;
content: "";
background-color: #5c5b5d;
height: 70px;
width: 35px;
border-radius: 18px;
}
/* Front leg 2 */
.ear-1:before {
top: 8px;
left: 50px;
}
/* Hind leg 2 */
.ear-1:after {
left: 160px;
top: 5px;
}
/* Tail */
.branch:before {
position: absolute;
content: "";
height: 15px;
width: 15px;
background-color: #aaa7aa;
bottom: 60px;
left: 267px;
border-radius: 50%;
}
/* Leaf */
.branch:after {
position: absolute;
content: "";
height: 30px;
width: 30px;
background-color: #768b36;
bottom: 20px;
left: 360px;
border-radius: 30px 0;
}
/* Eye Left */
.eye {
height: 10px;
width: 20px;
position: absolute;
box-shadow: 0 3.5px #343434;
border-radius: 50%;
transform: rotate(-30deg);
top: 74px;
left: 16px;
}
/* Eye Right */
.eye:before {
content: "";
position: absolute;
height: 10px;
width: 20px;
box-shadow: 0 3.5px #343434;
border-radius: 50%;
left: 50px;
}
/* Nose */
.eye:after {
content: "";
position: absolute;
background-color: #343434;
height: 35px;
width: 30px;
left: 20px;
border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
}
/* Blush */
.face:after {
content: "";
position: absolute;
background-color: #efd8db;
height: 14px;
width: 14px;
top: 62px;
left: 86px;
opacity: 0.9;
border-radius: 50%;
}
Our koala illustration is now ready. If you have any issues while creating this code, you can download the source code by clicking the download button below. Also, if you have any queries, suggestions, or feedback feel free to drop them in the comments below.
Happy Coding!
