In this article, you will learn how to create a cute panda drawing using HTML and CSS. We often see amazing animations and CSS designs on the web that grab attention. These little creative designs can make your webpage fun without having to rely on heavy JavaScript or external libraries.
So today I will show you an easy way to create a cute panda design using HTML and CSS. Earlier I shared with you tutorials on how to create a CSS Camera Drawing and Elephant Animation. This design is basically for making CSS art.
Cute Panda Design Drawing HTML and CSS
This design will be fun. First we create a box as the main container on a web page. Inside that box we add several elements such as the head, ears, eyes, nose, mouth and body. Each element is styled using CSS to create a complete panda.
Here is a live demo to help you visualize how the final result works. Don't hesitate to copy the Panda HTML code and use it in your own project.
HTML Editor:
How to folder setup:
Below I have shared the step by step tutorial for you, and if you are a beginner then don't forget to follow the tutorial below. To create this CSS art you need to have basic understanding of HTML CSS.
First, you create two HTML and CSS files, named index.html and style.css. Then link the style.css (CSS) file to the HTML file. If you are not able to link the codes, then you can see this article. Here I have explained everything how to make an HTML project folder.
Step 1: Character Structure
I started by creating a simple HTML structure where each part of the character is a separate div. Example HTML structure:
<div class="frame">
<div class="box"></div>
<div class="head"></div>
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left">
<div class="lans"></div>
</div>
<div class="eye right">
<div class="lans"></div>
</div>
<div class="dimple"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="hand"></div>
<div class="body"></div>
</div>
Step 2: Styling the Basic Structure
Next I designed the character using CSS. I placed the elements completely within the frame and applied border-radius, background color, shadow, and transitions to create a sleek look.
body {
margin: 0;
overflow: hidden;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 720px;
background: #feb89b;
}
.box {
width: 400px;
height: 400px;
background: #ffdcd1;
}The frame ensures that the design is centered on the page, and the other elements represent parts of the character.
Step 2: Designing the Head and Ears
We create the cute panda head as a big white circle, and the ears are circular pink shapes placed on the left and right of the head.
.head {
width: 400px;
height: 400px;
background: #fff;
border-radius: 100%;
position: absolute;
top: 14%;
left: 23%;
z-index: 5;
}
.head:before {
top: 36%;
border-radius: 180px 180px 100px 100px;
left: -11%;
content: "";
position: absolute;
width: 485px;
height: 226px;
z-index: 5;
background: #fff;
}
.head:after {
top: 47%;
border-radius: 100%;
left: -11%;
content: "";
position: absolute;
width: 480px;
height: 226px;
background: #ffffff;
z-index: 5;
}
.ear {
height: 180px;
width: 180px;
top: 13%;
background: #ff8fa0;
position: absolute;
z-index: 4;
border-radius: 100%;
}
.ear.left {
left: 17%;
box-shadow: inset 20px 20px 0 20px #21324c;
}
.ear.right {
right: 15%;
box-shadow: inset -20px 20px 0 20px #21324c;
}Here we use 100% border-radius to make perfect circles. The ears are given inner shadows to add depth.
Step 3: Adding Eyes with Depth
The eyes are oval shapes that use transformations and shadows to give a playful look. We also create inner circles called lans for the pupil effect.
.eye {
height: 160px;
width: 119px;
top: 29%;
background: #21324c;
position: absolute;
z-index: 6;
}
.eye.left {
transform: rotate(30deg);
left: 29%;
border-radius: 160% 100% 200% 50%;
}
.eye.right {
transform: rotate(330deg);
right: 26%;
border-radius: 100% 160% 50% 200%;
}
.eye.left:after,
.eye.right:after {
border-radius: 100%;
content: "";
position: absolute;
background: #fff;
z-index: 6;
width: 80px;
height: 80px;
top: 23%;
}
.eye.left:after {
left: 20%;
}
.eye.right:after {
right: 20%;
}
.eye.left .lans,
.eye.right .lans {
height: 70px;
width: 70px;
top: 27%;
background: #fff;
position: absolute;
z-index: 7;
border-radius: 100%;
}
.eye.left .lans {
left: 27%;
box-shadow: inset -5px -6px 0 0px #534759,
inset 5px -12px 0 18px #2f0c1f;
}
.eye.right .lans {
right: 27%;
box-shadow: inset 5px -5px 0 0px #534759,
inset -7px -11px 0 18px #2f0c1f;
}
.eye.left .lans:after,
.eye.right .lans:after,
.eye.left .lans:before,
.eye.right .lans:before {
border-radius: 100%;
content: "";
position: absolute;
background: #fff;
z-index: 6;
width: 20px;
height: 20px;
top: 64%;
}
.eye.left .lans:after {
left: 30%;
}
.eye.right .lans:after {
right: 30%;
}
.eye.left .lans:before {
width: 10px;
height: 10px;
left: 12%;
top: 40%;
}
.eye.right .lans:before {
width: 10px;
height: 10px;
right: 12%;
top: 40%;
}These styles use transform to rotate the eyes slightly and box-shadow to simulate shadows inside the eyes for a 3D effect.
Step 4: Adding Facial Features - Dimple, Nose and Mouth
The dimple and nose add character and cuteness, while the mouth is a simple curved line.
.dimple,
.dimple:after {
border-radius: 100%;
position: absolute;
background: #ffcdd7;
z-index: 5;
width: 160px;
height: 98px;
top: 44%;
}
.dimple {
left: 20%;
}
.dimple:after {
content: "";
top: 0%;
left: 178%;
}
.nose {
border-radius: 20%;
position: absolute;
background: linear-gradient(315deg, #fc8ea1 40%, transparent 40%);
z-index: 5;
width: 30px;
height: 30px;
top: 44%;
left: 50%;
transform: rotate(45deg);
}
.mouth,
.mouth:after {
border-radius: 50%;
position: absolute;
background: transparent;
z-index: 5;
width: 30px;
height: 14px;
border-bottom: 4px solid #21324c;
}
.mouth {
top: 50%;
left: 48%;
}
.mouth:after {
content: "";
left: 98%;
top: 0;
}This keeps the design simple but expressive, giving the character a friendly expression.
Step 5: Hands and Body
We create simple shapes for the hands and body using rounded rectangles.
.hand,
.hand:after {
position: absolute;
width: 398px;
height: 134px;
border-radius: 100%;
background: #21324c;
}
.hand {
top: 67%;
transform: rotate(335deg);
}
.hand:after {
content: "";
left: 68%;
top: 124px;
transform: rotate(48deg);
}
.body {
top: 74%;
left: 23%;
position: absolute;
width: 398px;
height: 300px;
border-radius: 40%;
background: #fff;
}These shapes combine to create a playful character figure.
I hope you learned from this tutorial how I created this Cute Panda Design using HTML and CSS. If there is any problem in Panda design, you can definitely comment and let me know.
Must Popular CSS art:
- Cat Animation using HTML and CSS
- CSS Fish Animation | CSS Art
- Dog Animation using HTML and CSS
Today we are ending the css neon signs tutorial here, and if you have any questions about the text effect, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial Namaste🙏
Post a Comment