Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create 3 popsicle illustrations. The fun part here is that we will create these illustrations using just a single div. All we need for this project is HTML and pure CSS. No external libraries or images are required to create these drawings.
Before we begin the tutorial, I must let you know that this kind of drawing is rarely used in practical scenarios. We usually use SVGs to create this kind of art.
But CSS art is a fun way to practice CSS and explore new properties. By experimenting with new properties you can improve your CSS skills and gain experience with a variety of properties.
If you want to try more such tutorials, you should check out this playlist here. This playlist from my youtube channel consists of a bunch of CSS art tutorials.
Video Tutorial:
If you prefer to learn by coding along with a video tutorial, you can check out the video down below. For more such tutorials subscribe to my youtube channel where I post such new tutorials every alternate day. Along with the tutorials I also post tips and tricks related to web development.
Project Folder:
Before we start coding, let us take a look at the project folder structure. We create a folder called – ‘3 Single Div Popsicles’. Within this folder, we have three files. These files are – index.html, style.css and script.js. The first file is an HTML document. Next, we have the stylesheet. Finally, we have the script file.
HTML:
We begin with the HTML code. 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>Single Div Popsicles</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="popsicle popsicle-1"></div>
<div class="popsicle popsicle-2"></div>
<div class="popsicle popsicle-3"></div>
</div>
</body>
</html>
CSS:
Next, we style and shape these elements into popsicles using CSS. 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: #f8db94;
}
.container {
height: 600px;
width: 700px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: space-around;
}
.popsicle {
width: 180px;
height: 300px;
position: relative;
top: 45px;
border-radius: 90px 90px 20px 20px;
}
.popsicle:before {
position: absolute;
content: "";
height: 180px;
width: 15px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 15px;
right: 20px;
top: 60px;
}
.popsicle:after {
position: absolute;
content: "";
height: 180px;
width: 30px;
background-color: #dba55b;
top: 300px;
margin: auto;
left: 0;
right: 0;
border-radius: 0 0 20px 20px;
}
.popsicle-1 {
background-image: repeating-linear-gradient(
135deg,
#ff7eaf 0,
#ff7eaf 20px,
#ff0565 20px,
#ff0565 40px
);
}
.popsicle-2 {
background-size: 60px 300px;
background-image: radial-gradient(
circle at 30px 53px,
#521a01 80px,
#ffba00 81px
);
}
.popsicle-3 {
background-color: #5e3a16;
background-image: radial-gradient(#c39a6b 4px, transparent 4px);
background-size: 30px 30px;
}
That’s it for this tutorial. If you face any issues while creating this code. You can download the source code by clicking on the ‘Download Code’ button below.
Also, don’t forget to drop your comments, suggestions and feedback in the comments below.
Happy Coding!
