Everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create Batman art. To create this illustration, we need HTML and CSS. We do not make use of any external libraries, or icons for images to create this illustration.
Even though you can hardly find such artworks and illustrations in the real world, they are highly beneficial when trying to experiment and learn various CSS properties. I would recommend beginners go for this tutorial.
If you are interested to learn through such tutorials 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, please check out the video down below. Also, subscribe to my YouTube channel, where I post new tutorials every alternate day.
Apart from these tutorials, I also post tips and tricks related to HTML CSS and JavaScript. If you are preparing for an interview, the MCQs from my community post section on YouTube would be highly beneficial for you.
Project Folder Structure:
Before you start coding, let us take a look at the project folder structure. We create a project folder structure called-‘ batman CSS art’. Inside this folder, we have two files. These files are HTML documents and the stylesheet.
HTML:
Start with the HTML code. First, copy the code below and paste it into your HTML document. In HTML code, we have a div with a class name container. The objective of this div is to centre and contain all the other elements.
The elements within the container are Batman and the base. Further inside Batman div, we have six divs. The class name for these elements is mouth I cape leg costume and belt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Batman CSS Art</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="batman">
<div class="mouth"></div>
<div class="eye"></div>
<div class="cape"></div>
<div class="leg"></div>
<div class="costume"></div>
<div class="belt"></div>
</div>
<div class="base"></div>
</div>
</body>
</html>
CSS:
Next, we use CSS to style this element. CSS shapes these elements into the desired artwork. Now copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #5385c4;
}
.container {
height: 43.75em;
width: 43.75em;
position: absolute;
right: 0;
bottom: 0;
}
.base {
background-color: #012338;
height: 16.87em;
width: 18.75em;
position: absolute;
bottom: 0;
right: 0;
}
.base:after {
content: "";
position: absolute;
background-color: #093245;
height: 0.62em;
width: 20.62em;
right: 0;
}
.batman {
background-color: #093341;
width: 6.87em;
height: 4.37em;
position: absolute;
border-radius: 1.87em 0 0 0;
left: 24.06em;
top: 13.15em;
}
.batman:before {
position: absolute;
content: "";
border-bottom: 2.5em solid #093341;
border-left: 1.87em solid transparent;
bottom: 4.25em;
right: 0;
}
.batman:after {
position: absolute;
content: "";
border-bottom: 2.5em solid #000700;
border-left: 1.87em solid transparent;
bottom: 4.25em;
right: 3.12em;
z-index: -1;
}
.mouth {
position: absolute;
background-color: #fcac92;
height: 1.25em;
width: 5.62em;
border-radius: 0 1.25em 0.31em 0;
bottom: 0.62em;
}
.mouth:before {
position: absolute;
content: "";
background-color: #e76e69;
height: 0.25em;
width: 4.37em;
border-radius: 0.18em;
top: 0.31em;
left: 0.31em;
}
.eye {
height: 0.5em;
width: 1em;
background-color: #fffdfe;
border-radius: 1em 1em 0 0;
position: absolute;
top: 1.12em;
left: 0.87em;
box-shadow: 2.37em 0 #fffdfe;
}
.costume {
height: 0.93em;
width: 9.37em;
background: linear-gradient(to right, #0e0e0e 3.12em, #01578a 3.12em);
position: absolute;
top: 4.37em;
left: -0.62em;
border-radius: 0 1.25em 0 0;
}
.costume:before {
background-color: #0e0e0e;
content: "";
position: absolute;
height: 3.12em;
width: 3.12em;
border-radius: 0.62em;
top: 0.62em;
transform: rotate(45deg);
left: -0.62em;
}
.costume:after {
background-color: #0a3442;
content: "";
position: absolute;
height: 6.25em;
width: 5em;
top: 0.93em;
border-radius: 0 1.25em 0 0;
}
.belt {
position: absolute;
background-color: #ffc638;
height: 1.25em;
width: 5.31em;
border-radius: 0.31em 0 0 0.31em;
top: 8.75em;
left: -0.93em;
}
.belt:before {
position: absolute;
content: "";
background-color: #01578a;
width: 5.31em;
height: 8.75em;
top: -4.37em;
left: 4.37em;
border-radius: 0 1.25em 0 3.75em;
}
.cape {
position: absolute;
background-color: #01578a;
width: 10em;
height: 3.75em;
right: 6.25em;
top: 4.37em;
border-radius: 0 0 0 2.5em;
}
.cape:before {
position: absolute;
content: "";
background-color: #01578a;
width: 12.5em;
height: 4.06em;
top: 3.75em;
left: 3.12em;
border-radius: 0 0 0 3.12em;
}
.leg {
position: absolute;
height: 3.75em;
width: 2.81em;
background-color: #0e0e0e;
top: 10em;
box-shadow: 4.37em 0 #0a3442;
}
@media screen and (min-width: 700px) {
.container {
font-size: 1.25em;
}
}
That’s it for this tutorial. If you are interested go ahead and customise this artwork the way you like. Also, if you e face any issues while creating this project, you can download the source code by clicking on the download button below. Apart from this, if you have any queries, suggestions or feedback please comment below.
Happy coding!
