CSS: Sky background for websites

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 divi…


This content originally appeared on DEV Community and was authored by DevLorenz0

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!#


This content originally appeared on DEV Community and was authored by DevLorenz0


Print Share Comment Cite Upload Translate Updates
APA

DevLorenz0 | Sciencx (2021-02-14T17:28:42+00:00) CSS: Sky background for websites. Retrieved from https://www.scien.cx/2021/02/14/css-sky-background-for-websites/

MLA
" » CSS: Sky background for websites." DevLorenz0 | Sciencx - Sunday February 14, 2021, https://www.scien.cx/2021/02/14/css-sky-background-for-websites/
HARVARD
DevLorenz0 | Sciencx Sunday February 14, 2021 » CSS: Sky background for websites., viewed ,<https://www.scien.cx/2021/02/14/css-sky-background-for-websites/>
VANCOUVER
DevLorenz0 | Sciencx - » CSS: Sky background for websites. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/14/css-sky-background-for-websites/
CHICAGO
" » CSS: Sky background for websites." DevLorenz0 | Sciencx - Accessed . https://www.scien.cx/2021/02/14/css-sky-background-for-websites/
IEEE
" » CSS: Sky background for websites." DevLorenz0 | Sciencx [Online]. Available: https://www.scien.cx/2021/02/14/css-sky-background-for-websites/. [Accessed: ]
rf:citation
» CSS: Sky background for websites | DevLorenz0 | Sciencx | https://www.scien.cx/2021/02/14/css-sky-background-for-websites/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts