Hello and welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Magikarp drawing using pure CSS. As I have mentioned in my previous tutorials, these kinds of arts and illustrations are just for fun type with little practical application. However, As a beginner, these pure CSS drawings helped me learn a lot of CSS properties.
So if you are looking for a fun way to level up your CSS skills, then pure CSS art might just be a thing for you. Let us start with the tutorial. The artwork I choose to use here is inspired by flaticons.
Video Tutorial:
If you would like to code along with me or just sit back and watch me create the drawing, check out the video tutorial on my youtube channel. Even though it is a speed art video you can lower the speed and code along.
Folder Structure:
Let us quickly look at the project folder structure. The project folder is called Magikarp CSS Art. Inside these, we have two files – index.html and style.css. The first is the HTML document, while the second one is the stylesheet.
HTML:
We start with the HTML section. Now copy the code below and paste it into your HTML file.
The HTML consists of a div with a class wrapper. This wrapper contains and centres all the other elements we will be using in this code. I have used various divs with different class names to create different parts of the Magikarp.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magikarp CSS Art</title>
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="magikarp">
<div class="fin-top"></div>
<div class="fin-bottom"></div>
<div class="gill-left">
<div class="gill1"></div>
</div>
<div class="gill-right">
<div class="gill2"></div>
</div>
<div class="eye"></div>
<div class="mouth"></div>
<div class="moustache-left"></div>
<div class="moustache-right"></div>
</div>
</div>
</body>
</html>
CSS:
Now coming to the CSS Code, copy the code provided below and paste it into your stylesheet.
We remove the padding from padding and apply #ffcc33 colour to the background.
We use a white colour background for the wrapper. We set the stack order of this wrapper using z-index.
The Magikarp is symmetrical so I will be using the same shapes to create the opposite sides. This will avoid code repetition and will require fewer elements too. I have just used basic CSS shapes to create the Magikarp. If you would like to learn how to create these shapes to check out this playlist.
body{
background-color: #ffcc33;
padding: 0;
margin: 0;
}
.wrapper{
background-color: #ffffff;
height: 300px;
width: 300px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
box-shadow: 0 15px 45px rgba(95, 71, 0,0.35);
z-index: -2;
}
.magikarp{
background-color: #e50027;
height: 130px;
width: 80px;
border-radius: 80px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 10px solid #c1001f
}
.fin-top{
background-color: #ffcc33;
height: 50px;
width: 17px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: -50px;
z-index: -1;
border-radius: 17px;
}
.fin-top:before,
.fin-top:after{
content: "";
position: absolute;
background-color: #ffcc33;
height: 50px;
width: 17px;
top: 5px;
transform-origin: bottom;
border-radius: 17px;
}
.fin-top:before{
transform: rotate(30deg);
}
.fin-top:after{
transform: rotate(-30deg);
}
.fin-bottom{
background-color: #ffcc33;
height: 50px;
width: 17px;
border-radius: 17px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 130px;
z-index: -1;
transform: rotate(180deg);
}
.fin-bottom:before,
.fin-bottom:after{
content: "";
position: absolute;
background-color: #ffcc33;
height: 50px;
width: 17px;
top: 5px;
transform-origin: bottom;
border-radius: 17px;
}
.fin-bottom:before{
transform: rotate(30deg);
}
.fin-bottom:after{
transform: rotate(-30deg);
}
.gill-left{
width: 40px;
height: 6px;
background-color: #c1001f;
position: absolute;
left: -45px;
top: 65px;
border-radius: 6px;
}
.gill-left:before,
.gill-left:after{
position: absolute;
content: "";
width: 40px;
height: 6px;
background-color: #c1001f;
border-radius: 6px;
position: absolute;
transform-origin: right;
}
.gill-left:before{
transform: rotate(45deg);
}
.gill-left:after{
transform: rotate(-45deg);
}
.gill-right{
width: 40px;
height: 6px;
background-color: #c1001f;
position: absolute;
right: -42px;
top: 65px;
border-radius: 6px;
}
.gill-right:before,
.gill-right:after{
position: absolute;
content: "";
width: 40px;
height: 6px;
background-color: #c1001f;
border-radius: 6px;
position: absolute;
transform-origin: left;
}
.gill-right:before{
transform: rotate(45deg);
}
.gill-right:after{
transform: rotate(-45deg);
}
.gill1,
.gill2{
background-color: #ffb3be;
height: 40px;
width: 40px;
border-radius: 0 0 0 40px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
z-index: -2;
}
.gill1{
transform: rotate(45deg);
left: -6px;
}
.gill2{
transform: rotate(225deg);
right: -6px;
}
.eye{
height: 23px;
width: 23px;
background-color: #303030;
border-radius: 50%;
position: absolute;
left: -2px;
top: 43px;
}
.eye:before{
content: "";
position: absolute;
height: 23px;
width: 23px;
background-color: #303030;
left: 63px;
border-radius: 50%;
}
.mouth{
height: 36px;
width: 19px;
background-color: rgba(193,0,31,0.5);
border: 7px solid #ffb3be;
border-radius: 30px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 40px;
}
.moustache-left,
.moustache-right{
height: 40px;
width: 10px;
border: 6px solid #ffcc33;
border-radius: 20px 0 0 0;
border-right: none;
border-bottom: none;
position: absolute;
top: 80px;
}
.moustache-left{
left: -5px;
}
.moustache-right{
right: -5px;
transform: rotateY(180deg);
}
.moustache-left:before,
.moustache-right:before{
content: "";
position: absolute;
height: 10px;
width: 10px;
border: 6px solid #ffcc33;
border-radius: 0 0 10px 10px;
border-top: none;
bottom: -11px;
left: -22px;
}
.wrapper:before{
content: "";
position: absolute;
height: 100%;
width: 50%;
background-color: rgba(255,255,255,0.3);
z-index: 2;
}
If you have any trouble while coding this, you can click the ‘Download Code’ button to download the source code. If you have any queries or suggestions, do comment them down below. Happy Coding.
