How I made a Pure CSS Pumpkin.-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How I made a Pure CSS Pumpkin.

Barbara Streisand

Dec 29, 2024 am 11:48 AM

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%;
}

Copy after login

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.

How I made a Pure CSS Pumpkin.
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;
}

Copy after login

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;
}

Copy after login

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.

How I made a Pure CSS Pumpkin.

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%;
}

Copy after login

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.

How I made a Pure CSS Pumpkin.

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;
}

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Where to find the Site Office Key in Atomfall

4 weeks ago By DDD

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

Where is the login entrance for gmail email?

7864

Java Tutorial

1649

CakePHP Tutorial

1406

Laravel Tutorial

1301

PHP Tutorial

1243

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

Stacked Cards with Sticky Positioning and a Dash of Sass Apr 03, 2025 am 10:30 AM

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

Using Markdown and Localization in the WordPress Block Editor Apr 02, 2025 am 04:27 AM

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

Comparing Browsers for Responsive Design Apr 02, 2025 pm 06:25 PM

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'? Apr 05, 2025 pm 05:51 PM

Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...

How to Use CSS Grid for Sticky Headers and Footers Apr 02, 2025 pm 06:29 PM

CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there's a bit of a learning curve, but Grid is

See all articles