CSS: Sky background that will change your websites
Tags: webdev, tutorial, javascript, codequality
Published: 2021-02-14 17:28:42

`Hello World!` New episode of the series! - [A CSS/JS trick in 5 minutes](https://dev.to/devlorenzo/series/11185) - 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](https://dev.to/devlorenzo/series/11185). 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](https://dev.to/devlorenzo/js-how-to-add-a-class-to-an-element-2f28)
```
.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](https://codepen.io/DevLorenzo/pen/poEXVZp) for full screen best experience:

{% codepen https://codepen.io/DevLorenzo/pen/poEXVZp %}

---

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!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)

---

## **[Subscribe to my Newsletter!](https://chipper-motivator-3112.ck.page/05710ea3d3)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!