Hello World! New episode of the series! - A CSS/JS trick in 5 minutes - Last 4 episodes were Javascript tricks so this time I want to show you a CSS one. I will try to do not exceed 20 lines of code like all other episodes of the series. So I will divide it into two bigs parts. In the first one, you will discover how to do a background with clouds, and in the second how to make a rain effect (maybe when the user hover something or enter a wrong info). Let's start!
Background:
body {
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
background-color: #22c5ff; // A blue that seems the sky
display: flex;
justify-content: center;
flex-direction: column;
}
Clouds:
HTML:
<div id="background-wrap">
<div class="x1">
<div class="cloud"></div>
</div>
<div class="x2">
<div class="cloud"></div>
</div>
<div class="x3">
<div class="cloud"></div>
</div>
<div class="x4">
<div class="cloud"></div>
</div>
<div class="x5">
<div class="cloud"></div>
</div>
</div>
We are just creating 6 divs, 5 are clouds and 1 is the container.
CSS:
First we style the container:
#background-wrap {
bottom: 0;
left: 0;
padding-top: 50px;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
Now we style all the clouds together:
.cloud {
background: #fff;
background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
border-radius: 100px;
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
height: 120px;
position: relative;
width: 350px;
}
.cloud:after,
.cloud:before {
background: #fff;
content: "";
position: absolute;
z-index: -1;
}
.cloud:after {
border-radius: 100px;
height: 100px;
left: 50px;
top: -50px;
width: 100px;
}
.cloud:before {
border-radius: 200px;
width: 180px;
height: 180px;
right: 50px;
top: -90px;
}
Then we style each cloud to look unique:
.x1 {
animation: animateCloud 35s linear infinite; // The animation will be infinite, when a cloud disappear from one side it will reappear on the other
transform: scale(0.65);
}
.x2 {
animation: animateCloud 20s linear infinite;
transform: scale(0.3);
}
.x3 {
animation: animateCloud 30s linear infinite;
transform: scale(0.5);
}
.x4 {
animation: animateCloud 18s linear infinite;
transform: scale(0.4);
}
.x5 {
animation: animateCloud 25s linear infinite;
transform: scale(0.55);
}
So each cloud have a different size (scale) and velocity (seconds to finish the animation)
Now we add the animation "animateCloud":
@keyframes animateCloud {
0% {
margin-left: -1000px;
}
100% {
margin-left: 100%;
}
}
We are just changing the margin so the cloud goes from left to right.
Make it rain:
We just need a div/section with .rain class. To make thing dynamically you can add the class in javascript as I explain in this article
.rain {
width: 100%;
height: 100vh;
position: relative;
position: absolute;
top: 0;
left: 0;
background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
animation: rain 0.5s linear infinite;
opacity: 0;
}
And the animation...
@keyframes rain {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: 10% 60%;
opacity: 1;
}
}
You can have here a live preview:
Open Me for full screen best experience:
Hope this helped and thanks for reading!
Please smash that like button to make me understand that you want the series to continue :)
Check this article about how to write CSS like a pro!
Subscribe to my Newsletter!
A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Top comments (0)