How I made a Pure CSS Pumpkin.
Happy Halloween, I made this recently made this 100% CSS Pumpkin to get in to the spooky season spirit and some people would like to know how it was made.
See the Pen
100% CSS Pumpkin by micfun123 (@micfun123)
on CodePen.
So let me explain how it works. For those of you who just want the code and dont want to see the process, here is the CodePen .
I have never done something like this before so my first goal was the 3 orange ovals.
So I started off with the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pumpkin</title>
<link rel="stylesheet" href="pumpkin.css">
</head>
<body>
<div>
<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>
<pre class="brush:php;toolbar:false">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 outputs 3 Perfect orange Ovals side by side. What is going on here? First, we centre the pumpkin div in the centre of the page using the body tag. We doing this with the first 3 lines. Next, we use height: 100vh; To tell the code that the body tag is taking up 100% of the screen. Without this it will the body tag will only be as big as the content, meaning that the Ovals will be centred across the top of the page. So here is what it looks like.
Next, We want the circles to overlap, this can be done fairly easily by giving the left and right Ovals a negative margin.
.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 moving the right Ovel over to the left by 45 pixels and the left Ovel to the right by 45 pixels. (I'm not going to add a photo of this stage as I still have not got a way to deal with storing photos)
Now for the harder part (Some, ok a lot of Google was used)
.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 are pretty self-explanatory. So im going to skip over it. Starting with position: absolute; what this does is remove the div from the flow of the website. Instead, it is based on the nearest anchor point. position: absolute; Can be placed over any element. Next, to centre the Stem horizontally we use left: 50% and transform: translateX(-50%); It makes sense when you think about it but you do have to think about it to start left: 50% Centers the left edge of the stem within the pumpkin div. I want the centre of the stem to be in the centre of the pumpkin. transform: translateX(-50%); moves the stem back over towards the left side by half the stem size. top: -47px; Does pretty much what you expect. It moves the top edge upwards by 47 px. z-index is a thing I have found recently, basically the height of the element. I want the z-index to be behind the pumpkin so I give it a z-index : -1 while the pumpkin has the default index of 0. This is what it looks like.
Finally the Eyes, mouth and background. Let's start with the eyes,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pumpkin</title>
<link rel="stylesheet" href="pumpkin.css">
</head>
<body>
<div>
<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>
<pre class="brush:php;toolbar:false">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%;
}
So this looks scarier than it is border-width: 0 50px 41px 30px; So here we setting the length of each side of the square. It starts from the top and works its way around clockwise. So the top of the square has a length of 0. This is because triangles have 3 sides this trick lets us remove one of the sides making a triangle. 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 it points in the other direction. border-color: transparent transparent #000000 transparent; So you may wonder why are there so many transparents. Well you see there is actually 3 triangles here (one of them doesn't exist because of the 0 widths) We only want to colour the bottom triangle so we set the other 3 to transparent. border-style: solid; We want the triangle to have a solid fill so we have to set the style to Solid. We have not really filled the triangle in instead we have a really big border so it looks like we have. After all of this, we now have the eyes.
The last step is the smile.
.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;
}
border-top-left-radius: 110px; and border-top-right-radius: 110px; define how rounded the top corners will be. This is the bit that makes the semi-circle however this will also put the curve at the top. To fix this I added transform: rotate(190deg) To rotate it to be a Smile and used left: 25%; to make it slightly off Center. So here is the final result.
See the Pen
100% CSS Pumpkin by micfun123 (@micfun123)
on CodePen.
I will admit it's not the prettiest of solutions or the most efficient, however, it was my first time trying to draw something in CSS and I'm rather happy with it. As always feel free to leave me feedback over on Discord or reddit.
The above is the detailed content of How I made a Pure CSS Pumpkin.. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1662
14
1419
52
1312
25
1262
29
1235
24
Google Fonts Variable Fonts
Apr 09, 2025 am 10:42 AM
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Apr 11, 2025 am 11:29 AM
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
HTML Data Attributes Guide
Apr 11, 2025 am 11:50 AM
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
How We Created a Static Site That Generates Tartan Patterns in SVG
Apr 09, 2025 am 11:29 AM
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
PHP is A-OK for Templating
Apr 11, 2025 am 11:04 AM
PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic
How to Build Vue Components in a WordPress Theme
Apr 11, 2025 am 11:03 AM
The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
Programming Sass to Create Accessible Color Combinations
Apr 09, 2025 am 11:30 AM
We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
