DEV Community

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

Posted on • Edited on

8 3

CSS: Sky background that will change your 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 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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay