Hey everyone. Welcome to today’s tutorial. First of all, I wish you all a very merry Christmas. So today we are going to create a Christmas special CSS illustration. We are going to build a Santa Claus illustration. To create this illustration, we need HTML and CSS.
This is a pure CSS tutorial, which means we do not make use of any external images icon for libraries to create this illustration.
If you are looking for more such tutorials to improve your CSS skills, you can check out this playlist here. This playlist contains 50-plus tutorials on how you can create CSS animations. This tutorial will help you enhance your CSS skills.
Video Tutorial:
If you are interested to learn through a video tutorial instead of reading this blog post you can check out the video down below. Also, subscribe to my YouTube channel where I pause new tips tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called Santa illustration. Inside this folder, we have two files. These files are index.html and style.css. These files are the HTML document and the stylesheet respectively.
HTML:
We begin with the HTML file. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Santa Illustration</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="ears"></div>
<div class="beard"></div>
<div class="mouth"></div>
<div class="hat"></div>
<div class="hair"></div>
<div class="santa">
<div class="moustache"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we create different shapes and position them using CSS. For this copy, the code provided to you below and paste it into your style sheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #060034;
}
.container {
height: 46.875em;
width: 37.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.santa {
background-color: #edbb93;
height: 6.25em;
width: 18.75em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 17.5em;
}
.ears {
position: absolute;
height: 4.37em;
width: 23.75em;
background-color: #e59076;
transform: translateX(-50%);
left: 50%;
top: 18.75em;
border-radius: 3.12em;
}
.santa:before {
content: "";
position: absolute;
height: 1.56em;
width: 1.56em;
background-color: #0c2137;
border-radius: 50%;
top: 2.5em;
left: 5em;
box-shadow: 6.25em 0 #0c2137;
}
.moustache {
position: absolute;
height: 4.37em;
width: 11.25em;
background-color: #e3e1ed;
left: -2.18em;
top: 5em;
border-radius: 3.12em 0;
}
.moustache:before {
position: absolute;
content: "";
height: 4.37em;
width: 11.25em;
background-color: #e3e1ed;
left: 11.25em;
top: 0;
border-radius: 0 3.12em;
}
.beard:after {
content: "";
background-color: #e3e1ed;
height: 20.62em;
width: 6.25em;
border-radius: 6.87em;
position: absolute;
top: 3.12em;
right: 9.68em;
}
.beard:before {
background-color: #d3d2e8;
height: 17.5em;
width: 6.87em;
border-radius: 6.87em;
position: absolute;
content: "";
top: 1.87em;
right: 5em;
z-index: 0;
box-shadow: -8.75em 0 #d3d2e8;
}
.beard {
background-color: #bfc2e0;
height: 15.62em;
width: 6.25em;
border-radius: 6.87em;
position: absolute;
top: 21.25em;
left: 25em;
box-shadow: -18.75em 0 #bfc2e0;
}
.mouth {
background: linear-gradient(#ffffff 1.87em, #0c2137 1.87em);
height: 5.62em;
width: 4.37em;
position: absolute;
top: 23.75em;
left: 16.25em;
border-radius: 0 0 4.375em 4.37em;
overflow: hidden;
}
.mouth:before {
content: "";
position: absolute;
background-color: #ea385f;
height: 2.81em;
width: 3.43em;
top: 3.43em;
left: -0.62em;
border-radius: 0.62em;
}
.hair {
height: 5em;
width: 23.12em;
background-color: #c3c1df;
position: absolute;
transform: translate(-50%);
left: 50%;
top: 15em;
border-radius: 5em;
}
.hair:before {
position: absolute;
content: "";
width: 25.62em;
background-color: #d2d3e6;
height: 6.25em;
left: -1.25em;
bottom: 2.5em;
border-radius: 1.25em;
}
.hair:after {
position: absolute;
content: "";
height: 10em;
width: 23.75em;
background-color: #ea385d;
bottom: 8.75em;
border-radius: 16.25em 0 0 0;
}
.hat {
position: absolute;
background-color: #c82a50;
height: 6.25em;
width: 3.12em;
left: 30.81em;
top: 1.25em;
border-radius: 0 2.5em 0 0;
}
.hat:before {
position: absolute;
content: "";
background-color: #e1e0ec;
height: 11.25em;
width: 11.25em;
top: 4.37em;
left: -1.87em;
border-radius: 50%;
}
@media screen and (max-width: 800px) {
.container {
font-size: 0.75em;
}
}
That’s it for this tutorial now you can go ahead and customise this illustration The Way You Want by changing colours sizes etc. This is a responsible illustration so it would look good on all screen sizes.
If you face any issues while creating this code, you can download the source code by clicking on the download button below. If you have any queries, suggestions, or feedback you can comment on them below.
Happy coding
