Hey friends. Welcome to today’s tutorial. Today we will create some CSS Art. However, this will be different from what we usually create. In this tutorial, instead of using multiple HTML elements, we will use a single HTML element. If you look at the resulting image or the code output preview, it would look quite difficult or even impossible for some of you to believe that this only needs one div element.
If you are interested in creating a CSS animation created with a single div, you should check out this tutorial. Also, I have a playlist on my youtube channel that consists of super-easy single div art. You can watch them here. The art we are going to create in today’s tutorial uses HTML and Pure CSS. Let us get started with today’s tutorial.
Video Tutorial:
If you like to code along, you might want to check out the video tutorial on youtube.
HTML:
We begin with HTML code. Create a HTML file – “index.html”. Copy the code below and paste it into your HTML file. You only need one div for the HTML section.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Div Egg</title>
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div></div>
</body>
</html>
CSS:
The CSS code is provided below. All you have to do is create a stylesheet and name it “style.css”. Now, paste this code into your stylesheet.
We start with the usual CSS reset. This CSS reset removes the default paddings and margins that the browser might add. For the body, we select a nice sky blue colour with the hex code ‘#45b7f4’.
Now we select our only HTML element and start styling it to look like an egg. We add a height of 300px and a width of 230px to make it look like a rectangle. Now, to convert this rectangle to an ellipse. We add some border radius. This border-radius might look complicated but you can create it quite easily with this fancy border-radius creator.
Center ‘div’ by ‘margin:auto’ method. Set the background colour to ‘white’. Add some box-shadow to this div to make it look even cooler.
Create a ‘before’ pseudo-element. We create the left eye with this pseudo-element. Next, we use box-shadow to create the other eye, the blush and the yolk.
We create an ‘after’ pseudo-element. We use this to create the mouth.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #45b7f4;
}
div{
height: 300px;
width: 230px;
background-color: #ffffff;
position: absolute;
margin: auto;
right: 0;
left: 0;
top: 0;
bottom: 0;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow: 25px 0 rgba(0,0,0,0.1);
}
div:before{
content: "";
position: absolute;
height: 14px;
width: 14px;
background-color: #010008;
border-radius: 50%;
top: 180px;
right: 88px;
box-shadow: -40px 0 0 #010008,
10px 15px 0 -2px #f5750f,
-50px 15px 0 -2px #f5750f,
-20px 0 0 70px #f5d201;
}
div:after{
content: "";
position: absolute;
height: 15px;
width: 25px;
top: 200px;
left: 102px;
border-radius: 5px 5px 15px 15px;
border: 3px solid #010008;
background: radial-gradient(
at 50% 100%,
#f5750f 8px,
#010008 8px
);
}
Your single div egg is now ready. Just a few easy steps and you can create your own single div art for CSS. This single ‘div’ art is particularly great for creating small icons with CSS.
That’s it for this tutorial. If you liked this tutorial let me know in the comments below. Also, all your suggestions and feedbacks are welcome. Be sure to subscribe to my youtube channel for more such tutorials.
The yellow part is not like your video 🙁
i got issue with yellow part too maybe the border radius part is not working correctly.