Including a confetti impact to a web site normally implies putting in a package deal. What if we may create one for ourselves utilizing nothing however pure, unadulterated CSS and HTML? Nicely, we’re going to just do that!
On this article, we’re going to learn to create a confetti impact with CSS. We’ll go over easy methods to make totally different shapes, together with squares, rectangles, hexagrams, pentagrams, decagrams, and wavy traces in CSS, in addition to study to animate the shapes and randomize their traits to create a confetti impact.
Organising our information
The very first thing we’re going to do is create a folder on our machine. I referred to as mine app, however you might be free to call yours the best way you want.
Open the folder with the code editor of your alternative. Subsequent, create two information contained in the folder named index.html and model.css.
The index.html file may have this starter markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Appropriate" content material="IE=edge" />
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
<hyperlink rel="stylesheet" href="https://weblog.logrocket.com/how-create-confetti-effect-css/model.css" />
<title>Confetti</title>
</head>
<physique>
<label for="examine">Test to cease</label>
<enter kind="checkbox" id="examine" />
<div class="confetti-container">
<div class="confetti">
<i class="sq."></i>
<i class="rectangle"></i>
<i class="hexagram"></i>
<i class="pentagram"></i>
<i class="dodecagram"></i>
<i class="wavy-line"></i>
</div>
</div>
</physique>
</html>
Within the markup above, we’ve got some meta tags, a title, and a hyperlink to our CSS file within the head tag. The physique ingredient comprises a label and a examine field that can solely be used for demonstration functions.
The confetti-container class comprises the confetti, and the confetti comprises varied i tags with lessons that match the shapes we’ll create.
Creating totally different types of confetti with CSS
To create the totally different types of the confetti, we’ll open the model.css file.
Earlier than we create the shapes, the primary parts to focus on are root, physique, html, label, and enter. We’ll add the next types to root and html:
:root {
--bg: yellow;
}
html,
physique {
background-color: #101e35;
font-size: 10px; /* Makes 1rem = 10px */
}
The label and enter come subsequent:
label {
coloration: white;
font-size: 1.5rem;
}
enter {
width: 40px;
peak: 40px;
cursor: pointer;
}
After which we set the next types for .confetti-container and .confetti:
.confetti-container {
user-select: none;
pointer-events: none;
z-index: 10;
}
.confetti {
place: fastened;
left: 0;
proper: 0;
show: flex;
}
Let’s break this down a bit.
user-select and pointer-events be certain that the content material of .confetti-container can’t be highlighted by the consumer.
Then, z-index ensures that the content material of the .confetti-container stays above each ingredient on the web page.
The model in .confetti ensures that the confetti will behave individually from the opposite content material on the web page. The show is about to make sure that the content material of .confetti is all the time stacked horizontally.
Creating the totally different confetti shapes
Now, we’ll go over easy methods to create totally different shapes for our confetti impact. We do that to assist add some selection to the confetti impact!
Making a sq.
To create a sq., we’ll choose the .sq. class and add the next model to it:
.confetti .sq. {
width: 1rem;
peak: 1rem;
background-color: var(--bg);
rework: rotate(140deg);
}
var(--bg) is an instance of a CSS variable. This was set within the :root, nonetheless, it’ll even be set instantly within the HTML in every form.
The rework property is used to rotate the sq..
Create a rectangle
A rectangle is much like a sq., nonetheless, the width and peak received’t be the identical. The next types will generate a rectangle:
.confetti .rectangle {
width: 1rem;
peak: 0.5rem;
background-color: var(--bg);
}
Making a hexagram
.hexagram is a star that has six sides. The next code will generate one for us:
.confetti .hexagram {
width: 0;
peak: 0;
border-left: 0.5rem stable clear;
border-right: 0.5rem stable clear;
border-bottom: 1rem stable var(--bg);
place: relative;
}
.confetti .hexagram:after {
content material: "";
width: 0;
peak: 0;
border-left: 0.5rem stable clear;
border-right: 0.5rem stable clear;
border-top: 1rem stable var(--bg);
place: absolute;
prime: 0.33rem;
left: -0.5rem;
}
In .confetti .hexagram, setting the width and peak to 0, in addition to setting the borders in the identical method, be certain that we generate a triangle. The place ingredient makes certain that the properties inside it may be moved independently.
In .confetti .hexagram:after, we generate one other triangle that’s reversed. And with the place set to absolute, we are able to set the values for prime and left to appropriately place and type a six-sided star.
Making a pentagram
To create a pentagram, we have to make a five-sided star. To take action, we’ll add the next types to .pentagram:
.confetti .pentagram {
width: 0rem;
peak: 0rem;
show: block;
margin: 0.5rem 0;
border-right: 1rem stable clear;
border-bottom: 0.7rem stable var(--bg);
border-left: 1rem stable clear;
rework: rotate(35deg);
place: relative;
}
.confetti .pentagram:earlier than {
border-bottom: 0.8rem stable var(--bg);
border-left: 0.3rem stable clear;
border-right: 0.3rem stable clear;
place: absolute;
peak: 0;
width: 0;
prime: -0.45rem;
left: -0.65rem;
show: block;
content material: "";
rework: rotate(-35deg);
}
.confetti .pentagram:after {
place: absolute;
show: block;
coloration: var(--bg);
prime: 0.03rem;
left: -1.05rem;
width: 0rem;
peak: 0rem;
border-right: 1rem stable clear;
border-bottom: 0.7rem stable var(--bg);
border-left: 1rem stable clear;
rework: rotate(-70deg);
content material: "";
}
Let’s break it down.
.confetti .pentagram generates a triangle and rotates it by 35deg.
.confetti .pentagram:earlier than generates a triangle as effectively and rotates it by -35deg. The place was set to maneuver the weather vertically and horizontally.
.confetti .pentagram:after generates one other triangle and rotates it by 70deg. Moreover, the place was used to maneuver the highest and backside displacement.
Making a dodecagram
A dodecagram is a 12-sided star. It combines squares to type its form. Let’s construct it inside our .dodecagram ingredient:
.confetti .dodecagram {
background: var(--bg);
width: 8px;
peak: 8px;
place: relative;
}
.confetti .dodecagram:earlier than {
content material: "";
peak: 8px;
width: 8px;
background: var(--bg);
rework: rotate(30deg);
place: absolute;
prime: 0;
left: 0;
}
.confetti .dodecagram:after {
content material: "";
peak: 8px;
width: 8px;
background: var(--bg);
rework: rotate(60deg);
place: absolute;
prime: 0;
left: 0;
}
.confetti .dodecagram generates a sq., however confetti .dodecagram:earlier than and .confetti .dodecagram:after generate two rotated squares.
Making a wavy line with CSS
To create our .wavy-line ingredient, we’ll write the next code:
.confetti .wavy-line {
place: relative;
}
.confetti .wavy-line::after,
.confetti .wavy-line::earlier than {
content material: "";
peak: 10px;
width: 80px;
background-size: 20px 10px;
place: absolute;
left: -9rem;
rework: rotate(90deg);
}
.confetti .wavy-line::earlier than {
background-image: linear-gradient(
45deg,
clear,
clear 50%,
var(--bg) 50%,
clear 60%
);
prime: 1rem;
}
.confetti .wavy-line::after {
background-image: linear-gradient(
-45deg,
clear,
clear 50%,
var(--bg) 50%,
clear 60%
);
}
Let’s go over this in additional element..confetti .wavy-line was used to set a relative place to its content material.
Extra nice articles from LogRocket:
In .confetti .wavy-line::after and .confetti .wavy-line::earlier than, background-size is used to specify the horizontal and vertical measurement of the pseudo-element.
background-image was then used to attract the traces with their particular angles.
Animate shapes with a waterfall impact
To animate the shapes and make them simulate a waterfall, we’ll add the next types:
.confetti i {
width: 3rem;
peak: 3rem;
margin: 0 0.2rem;
animation-name: confetti;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: calc(60s / var(--speed));
}
.confetti i:nth-child(even) {
rework: rotate(90deg);
}
@keyframes confetti {
0% {
rework: translateY(-100vh);
}
100% {
rework: translateY(100vh);
}
}
Inside the code, .confetti i is used to pick each form and apply animation properties to it.
calc() is a operate used to carry out calculations in CSS.
We choose .confetti i:nth-child(even) to rotate each form whose index is an excellent quantity.
Lastly, below the @keyframes confetti, we create an animation to make the shapes transfer from the highest to the underside of the web page.
Randomizing shapes, animation, period, and coloration
To make the shapes fall with various period and have totally different colours, we’ve got to go variables on to the shapes utilizing HTML after which do away with :root completely:
<div class="confetti-container">
<div class="confetti">
<i model="--bg: purple; --speed: 20" class="sq."></i>
<i model="--bg: inexperienced; --speed: 24" class="rectangle"></i>
<i model="--bg: white; --speed: 13" class="hexagram"></i>
<i model="--bg: yellow; --speed: 10" class="pentagram"></i>
<i model="--bg: purple; --speed: 17" class="dodecagram"></i>
<i model="--bg: pink; --speed: 15" class="wavy-line"></i>
</div>
</div>
Subsequent, we’ll create extra of those shapes, add random colours, and provides them some velocity to generate our confetti:
<div class="confetti-container">
<div class="confetti">
<i model="--speed: 10; --bg: yellow" class="sq."></i>
<i model="--speed: 18; --bg: white" class="pentagram"></i>
<i model="--speed: 29; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 17; --bg: blue" class="hexagram"></i>
<i model="--speed: 33; --bg: purple" class="pentagram"></i>
<i model="--speed: 26; --bg: yellow" class="dodecagram"></i>
<i model="--speed: 24; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 5; --bg: blue" class="wavy-line"></i>
<i model="--speed: 40; --bg: white" class="sq."></i>
<i model="--speed: 17; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 25; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 15; --bg: yellow" class="wavy-line"> </i>
<i model="--speed: 32; --bg: yellow" class="pentagram"></i>
<i model="--speed: 25; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 37; --bg: yellow" class="dodecagram"></i>
<i model="--speed: 23; --bg: pink" class="wavy-line"></i>
<i model="--speed: 37; --bg: purple" class="dodecagram"></i>
<i model="--speed: 37; --bg: pink" class="wavy-line"></i>
<i model="--speed: 36; --bg: white" class="hexagram"></i>
<i model="--speed: 32; --bg: inexperienced" class="wavy-line"></i>
<i model="--speed: 32; --bg: yellow" class="pentagram"></i>
<i model="--speed: 29; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 37; --bg: purple" class="dodecagram"></i>
<i model="--speed: 23; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 30; --bg: pink" class="rectangle"></i>
<i model="--speed: 30; --bg: purple" class="sq."></i>
<i model="--speed: 18; --bg: purple" class="pentagram"></i>
<i model="--speed: 19; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 16; --bg: blue" class="hexagram"></i>
<i model="--speed: 23; --bg: purple" class="pentagram"></i>
<i model="--speed: 34; --bg: yellow" class="dodecagram"></i>
<i model="--speed: 39; --bg: pink" class="wavy-line"></i>
<i model="--speed: 40; --bg: purple" class="sq."></i>
<i model="--speed: 21; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 14; --bg: white" class="sq."></i>
<i model="--speed: 38; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 19; --bg: purple" class="dodecagram"></i>
<i model="--speed: 29; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 21; --bg: white" class="hexagram"></i>
<i model="--speed: 17; --bg: purple" class="wavy-line"></i>
<i model="--speed: 32; --bg: yellow" class="pentagram"></i>
<i model="--speed: 23; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 37; --bg: purple" class="dodecagram"></i>
<i model="--speed: 48; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 38; --bg: pink" class="rectangle"></i>
<i model="--speed: 13; --bg: purple" class="pentagram"></i>
<i model="--speed: 49; --bg: yellow" class="dodecagram"></i>
<i model="--speed: 19; --bg: cyan" class="wavy-line"></i>
<i model="--speed: 15; --bg: steelblue" class="sq."></i>
<i model="--speed: 10; --bg: yellow" class="sq."></i>
<i model="--speed: 18; --bg: white" class="pentagram"></i>
<i model="--speed: 29; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 17; --bg: blue" class="hexagram"></i>
<i model="--speed: 33; --bg: purple" class="pentagram"></i>
<i model="--speed: 26; --bg: yellow" class="dodecagram"></i>
<i model="--speed: 24; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 5; --bg: white" class="wavy-line"></i>
<i model="--speed: 40; --bg: purple" class="sq."></i>
<i model="--speed: 17; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 25; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 15; --bg: cyan" class="wavy-line"> </i>
<i model="--speed: 32; --bg: yellow" class="pentagram"></i>
<i model="--speed: 45; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 37; --bg: purple" class="dodecagram"></i>
<i model="--speed: 23; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 37; --bg: purple" class="dodecagram"></i>
<i model="--speed: 37; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 26; --bg: white" class="hexagram"></i>
<i model="--speed: 32; --bg: cyan" class="wavy-line"></i>
<i model="--speed: 32; --bg: yellow" class="pentagram"></i>
<i model="--speed: 45; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 37; --bg: purple" class="dodecagram"></i>
<i model="--speed: 23; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 50; --bg: pink" class="rectangle"></i>
<i model="--speed: 30; --bg: purple" class="sq."></i>
<i model="--speed: 18; --bg: purple" class="pentagram"></i>
<i model="--speed: 19; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 16; --bg: blue" class="hexagram"></i>
<i model="--speed: 23; --bg: purple" class="pentagram"></i>
<i model="--speed: 33; --bg: yellow" class="dodecagram"></i>
<i model="--speed: 39; --bg: white" class="wavy-line"></i>
<i model="--speed: 40; --bg: orange" class="sq."></i>
<i model="--speed: 21; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 14; --bg: white" class="sq."></i>
<i model="--speed: 38; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 19; --bg: purple" class="dodecagram"></i>
<i model="--speed: 29; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 34; --bg: white" class="hexagram"></i>
<i model="--speed: 17; --bg: indigo" class="wavy-line"></i>
<i model="--speed: 32; --bg: yellow" class="pentagram"></i>
<i model="--speed: 23; --bg: white" class="sq."></i>
<i model="--speed: 18; --bg: inexperienced" class="rectangle"></i>
<i model="--speed: 37; --bg: purple" class="dodecagram"></i>
<i model="--speed: 48; --bg: pink" class="wavy-line"> </i>
<i model="--speed: 38; --bg: pink" class="rectangle"></i>
<i model="--speed: 13; --bg: purple" class="pentagram"></i>
<i model="--speed: 49; --bg: yellow" class="dodecagram"></i>
<i model="--speed: 19; --bg: purple" class="wavy-line"></i>
<i model="--speed: 15; --bg: cyan" class="sq."></i>
</div>
</div>
You may see the ultimate results of our CSS confetti impact within the CodePen beneath:
See the Pen
CSS Confetti by Onuorah Bonaventure Chukwudi (@bonarhyme)
on CodePen.
Bonus types
We are able to additionally embrace an choice for the consumer to pause the confetti. Add the next model in order that we are able to cease the animation after we click on the checkbox:
enter:checked + .confetti-container i {
/* show: none; */
animation-play-state: paused;
}
You can even specify the dimension of the confetti utilizing this model:
.confetti {
place: fastened;
left: 0;
proper: 0;
show: flex;
width: 600px;
peak: 600px;
overflow: hidden;
}
N.B., Including a show of none removes the confetti from the display screen.
The whole code with these bonus types might be considered, edited, and forked on CodePen and GitHub:
See the Pen
CSS Confetti with bonus model by Onuorah Bonaventure Chukwudi (@bonarhyme)
on CodePen.
Conclusion
Though it might have appeared daunting, we had been capable of create a cool confetti impact with CSS! That is all to indicate that CSS shouldn’t look scary and that you would be able to faucet into its superpowers to create superb animations and layouts.
Thanks for studying via. I hope you loved this text, and you’ll want to depart a remark you probably have any questions. Joyful coding!
Is your frontend hogging your customers’ CPU?
As internet frontends get more and more advanced, resource-greedy options demand increasingly more from the browser. When you’re excited about monitoring and monitoring client-side CPU utilization, reminiscence utilization, and extra for your entire customers in manufacturing, attempt LogRocket.
https://logrocket.com/signup/
LogRocket is sort of a DVR for internet and cellular apps, recording the whole lot that occurs in your internet app or website. As a substitute of guessing why issues occur, you may mixture and report on key frontend efficiency metrics, replay consumer classes together with utility state, log community requests, and mechanically floor all errors.
Modernize the way you debug internet and cellular apps — Begin monitoring at no cost.
