DEV Community

Cover image for CSS: Sky background that will change your websites
Lorenzo
Lorenzo

Posted on • Edited on

CSS: Sky background that will change your websites

#webdev #tutorial #javascript #codequality

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; }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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); }
Enter fullscreen mode Exit fullscreen mode

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%; } }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

And the animation...

@keyframes rain { 0% { background-position: 0 0; opacity: 1; } 100% { background-position: 10% 60%; opacity: 1; } }
Enter fullscreen mode Exit fullscreen mode

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)