Happy Halloween, I recently made this 100% CSS pumpkin to get into the spirit of the spooky season and some of you were wondering how it was made.
see pen
100% CSS Pumpkin By micfun123 (@micfun123)
exist coding pen.
So let me explain how it works. For those who just want the code and don’t want to see the process, here it is coding pen .
I had never done anything like this before, so my first goal was the 3 orange ovals.
So I started with HTML.
lang="en">
charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
class="left">
class="center">
class="right">
The HTML doesn’t really change anything right now, but it also doesn’t display anything yet. It’s CSS time.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
This will output 3 perfect orange ovals side by side. What’s going on? First, we center the pumpkin div on the page using the body tag. We use the first 3 lines to do this. Next, we use height: 100vh; Tells the code that the body tag takes up 100% of the screen. Without this, the body tag would only be as large as the content, meaning the oval would be centered at the top of the page. This is what it looks like.
Next, we want the circles to overlap, which can be done fairly easily by giving the left and right ovals negative margins.
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}
So here we move the right oval 45 px to the left and the left oval 45 px to the right. (I won’t be adding photos at this stage as I still don’t have a handle on storing photos)
Now comes the harder part (some, well, using a lot of Google)
.stem {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
width: 30px;
height: 60px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
.curve{
position: absolute;
top: -47px;
left: 43%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
transform: rotate(-15deg);
width: 30px;
height: 30px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
so width , height, border-radius and background-color is very self-explanatory. So I’m going to skip it. Started with position: absolute; What it does is remove the div from the website flow. Instead, it is based on the nearest anchor point. position: absolute; Can be placed on any element. Next, to center the stem horizontally, we use left: 50% and transform: translateX(-50%); It makes sense when you think about it, but you have to think about it before you can start left: 50% Center the left edge of the stem in the pumpkin div. I want the center of the stem to be in the center of the pumpkin. transform: translateX(-50%); Move the valve stem half the valve stem size to the left. top: -47px; Pretty much what you’d expect. It moves the top edge up by 47 pixels. z-index It’s something I discovered recently, which is basically the height of an element. I want the z-index to be behind the pumpkin, so I give it a z-index : -1 The default index of pumpkin is 0.
Finally come the eyes, mouth and background. Let’s start with the eyes first
.left_eye {
left: 70%;
top: 25px;
transform: translateX(-50%);
position: absolute;
border-style: solid;
border-width: 0 30px 41px 50px;
border-color: transparent transparent #000000 transparent;
}
.right_eye {
left: 30%;
top: 25px;
transform: translateX(-50%);
position: absolute;
border-style: solid;
border-width: 0 50px 41px 30px;
border-color: transparent transparent #000000 transparent;
}
So this looks scarier than it actually is border-width: 0 50px 41px 30px; So here we set the length of each side of the square. It starts at the top and runs clockwise. So the length of the top of the square is 0. Then the right side is 50px long, the bottom is 50px long, and the left side is 30px long. For the right eye, we flip the left and right values so they point in the other direction. border-color: transparent transparent #000000 transparent; So you might be wondering why there are so many transparent ones. Okay, you’ll see there are actually 3 triangles here (one of which doesn’t exist because it has a width of 0) and we only want to color the bottom triangle, so we set the other 3 triangles to transparent. border-style: solid; We want the triangle to have a solid fill, so we have to set the style to solid. We don’t really fill the triangle, but we have a big border, so it looks like we’ve filled it. After all this, we now have eyes.
The last step is to smile.
.smile {
position: absolute;
width: 80px;
height: 25px;
top: 90px;
left: 25%;
background-color: rgb(0, 0, 0);
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 5px solid rgb(0, 0, 0);
border-bottom: 0;
transform: rotate(190deg)
}
border-top-left-radius: 110px; and border-top-right-radius: 110px; Defines the roundness of the vertex corners. This is the part that forms the semicircle, but this also puts the curve at the top. To solve this problem I added transform: rotate(190deg) Rotate it into a smile and use left: 25%; Make it slightly off center. This is the final result.
see pen
100% CSS Pumpkin By micfun123 (@micfun123)
exist coding pen.
I admit this isn’t the prettiest solution or the most efficient, however, this is my first time trying to draw something in CSS and I’m very happy with it. As always, please feel free to leave me feedback Disharmonious or reddit.