Introduction:
Welcome to this exciting tutorial where we’ll be creating a stunning butterfly using HTML and CSS. In this hands-on project, you’ll learn how to combine fundamental HTML structure with advanced CSS styling to bring a beautiful butterfly to life on your web page. Get ready to spread your wings and dive into the world of web design!
Things You Will Learn:
- Understanding the basics of HTML structure.
- Applying CSS styling to create visually appealing designs.
- Working with position properties to precisely position elements.
- Using pseudo-elements to enhance the visual aesthetics.
- Grasping the concept of box-shadow to add depth to elements.
- Creating a responsive design with relative units and percentages
Video Tutorial:
If you prefer to learn by watching a video tutorial over reading this lengthy blog post you can watch the video tutorial here down below. Also do not forget to subscribe to my YouTube channel where I post tips, tricks and tutorials related to web development regularly.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Butterfly CSS Art”. Inside this folder, we have 2 files. These files are :
- index.html
- style.css
HTML:
We begin with the HTML code. 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 Butterfly</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="wing-1"></div>
<div class="wing-2"></div>
<div class="butterfly"></div>
</div>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f59318;
}
.container {
height: 500px;
width: 500px;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 30px;
}
.container:after {
position: absolute;
content: "";
height: 100%;
width: 50%;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 30px 0 0 30px;
top: 0;
}
.butterfly {
height: 50px;
width: 50px;
background-color: #000000;
position: absolute;
border-radius: 50%;
margin: auto;
left: 0;
right: 0;
top: 100px;
}
.butterfly:before {
position: absolute;
content: "";
height: 300px;
width: 40px;
background-color: #000000;
left: 5px;
top: 20px;
border-radius: 20px;
}
.butterfly:after {
position: absolute;
content: "";
height: 50px;
width: 2px;
background-color: #000000;
bottom: 30px;
left: 15px;
box-shadow: 20px 0 #000000;
}
.wing-1 {
background-color: #f59318;
height: 160px;
width: 320px;
position: absolute;
left: 90px;
top: 120px;
border-radius: 0 0 160px 160px;
}
.wing-1:before {
content: "";
position: absolute;
height: 20px;
width: 20px;
background-color: #f54f17;
border-radius: 50%;
left: 80px;
top: 10px;
box-shadow: 140px 0 #f54f17, -50px 20px 0 10px #000000,
190px 20px 0 10px #000000;
}
.wing-2 {
position: absolute;
background-color: #f54f17;
height: 250px;
width: 300px;
margin: auto;
left: 0;
right: 0;
border-radius: 50% 50% 50% 50% / 75% 75% 25% 25%;
top: 140px;
}
.wing-2:before {
content: "";
position: absolute;
height: 30px;
width: 30px;
background-color: #f59318;
border: 10px solid #ffffff;
border-radius: 50%;
top: 150px;
left: 40px;
box-shadow: 160px 0 0 -9px #f59318, 160px 0 0 #ffffff,
75px -240px 0 -18px #000000, 97px -240px 0 -18px #000000;
}
Conclusion:
Congratulations! You’ve successfully created a captivating butterfly using HTML and CSS. This tutorial has equipped you with valuable skills in web design, including working with HTML structure, applying CSS styling, and creating visually appealing designs. Feel free to experiment with the code, add your own creative touches, and continue exploring the vast world of web development. Keep coding, and stay tuned for more exciting tutorials!
