What are the steps to create a downpour in every location on Earth

Is there a way to create a continuous raining effect for my weather app using CSS only? I have achieved a satisfactory look, but the rain effects seem to only cover random chunks of the screen rather than the entire screen. How can I make it cover the entire screen consistently?

body {
  overflow: hidden;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#background.night {
  background: linear-gradient(#0F2129, #47334A);
}

#background>.cloud {
  width: 900px;
  height: 900px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: cloud 10s infinite alternate;
}

#background.rain>.cloud {
  opacity: .5;
}

#background>.cloud:nth-child(even) {
  animation-delay: 3s;
}

#background.night>.cloud {
  background-color: grey;
}

#background.rain>.cloud:before,
#background.rain>.cloud:after {
  animation: rain 1s infinite linear;
  content: '';
  border-radius: 50%;
  display: block;
  height: 6px;
  width: 3px;
  opacity: 1;
  margin-top: 700px;
}

#background.rain>.cloud:after {
  transform: translate(50px);
}

#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
  animation-delay: .3s;
}

@keyframes rain {
  0% {
    box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
  }
  100% {
    box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
  }
}

@keyframes cloud {
  100% {
    transform: translate(-50px) scale(1.05);
  }
}
<div id="background" class="rain night">
  <div class="cloud" style="top: -797.689px; left: -315px;"></div>
  <div class="cloud" style="top: -865.689px; left: -225px;"></div>
  <div class="cloud" style="top: -814.689px; left: -65px;"></div>
  <div class="cloud" style="top: -853.689px; left: 253px;"></div>
  <div class="cloud" style="top: -823.689px; left: 23px;"></div>
  <div class="cloud" style="top: -843.689px; left: 109px;"></div>
</div>

csscss-animations

Answer №1

This task is perfect for a unique radial-gradient that repeats. Avoid using linear-gradient as it can be challenging to create spaces between repetitions (and sometimes impossible).

Below is a simple example where the same gradient is used at random positions and all repeat:

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
}
html:before {
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
  background:
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px  12px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px  43px;
  background-size:50px 55px;
  animation:rain 0.2s linear infinite;
}
@keyframes rain{
  to {
     transform:translateY(55px); /* Same as the height of the background-size */
  }
}

If you want to add some skewing effect:

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
}
html:before {
  content:"";
  position:absolute;
  bottom:0;
  right:-20%;
  left:-20%;
  height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
  background:
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px  12px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px  43px;
  background-size:50px 55px;
  animation:rain 0.2s linear infinite;
  transform:skew(-8deg);
}
@keyframes rain{
  to {
     transform:skew(-8deg) translateY(55px); /* Same as the height of the background-size */
  }
}

You can also use CSS variables for easier customization:

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
  
  --s:2px 8px; /* size of drop of water*/
  --c:#ccc;    /* color of the water*/
  --a:-7deg;   /* control the skewing*/
  --w:50px;    /* width of the pattern*/
  --h:55px;    /* height of the pattern*/
  
   --rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before {
  content:"";
  position:absolute;
  bottom:0;
  right:-20%;
  left:-20%;
  height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
  background:
     var(--rad) -12px 3px,
     var(--rad) 17px 0,
     var(--rad) 6px  12px,
     var(--rad) 24px 23px,
     var(--rad) 39px 30px,
     var(--rad) 5px  43px;
  background-size:var(--w) var(--h);
  animation:rain 0.2s linear infinite;
  transform:skew(var(--a));
}
@keyframes rain{
  to {
     transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
  }
}

For a more dynamic animation, consider using two layers with different patterns:

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
  
  --s:2px 8px; /* size of drop of water*/
  --c:#ccc;    /* color of the water*/
  --a:-7deg;   /* control the skewing*/
  --w:53px;    /* width of the pattern*/
  --h:55px;    /* height of the pattern*/
  
   --rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before,
html:after{
  content:"";
  position:absolute;
  bottom:0;
  right:-20%;
  left:-20%;
  height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
  background:
     var(--rad) -12px 3px,
     var(--rad) 17px 0,
     var(--rad) 6px  12px,
     var(--rad) 24px 23px,
     var(--rad) 39px 30px,
     var(--rad) 5px  43px;
  background-size:var(--w) var(--h);
  animation:rain 0.2s linear infinite;
  transform:skew(var(--a));
}
html:after {
   --h:70px;
   --w:61px;
}
@keyframes rain{
  to {
     transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
  }
}

Answer №2

It seems like there was a missing margin-left in your code snippet.

body {
  overflow: hidden;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#background.night {
  background: linear-gradient(#0F2129, #47334A);
}

#background>.cloud {
  width: 900px;
  height: 900px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: cloud 10s infinite alternate;
}

#background.rain>.cloud {
  opacity: .5;
}

#background>.cloud:nth-child(even) {
  animation-delay: 3s;
}

#background.night>.cloud {
  background-color: grey;
}

#background.rain>.cloud:before,
#background.rain>.cloud:after {
  animation: rain 1s infinite linear;
  content: '';
  border-radius: 50%;
  display: block;
  height: 6px;
  width: 3px;
  opacity: 1;
  margin-top: 700px;
  margin-left:400px; /* This is where the missing margin-left was identified */
}

#background.rain>.cloud:after {
  transform: translate(50px);
}

#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
  animation-delay: .3s;
}

@keyframes rain {
  0% {
    box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
  }
  100% {
    box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
  }
}

@keyframes cloud {
  100% {
    transform: translate(-50px) scale(1.05);
  }
}
<div id="background" class="rain night">
  <div class="cloud" style="top: -797.689px; left: -315px;"></div>
  <div class="cloud" style="top: -865.689px; left: -225px;"></div>
  <div class="cloud" style="top: -814.689px; left: -65px;"></div>
  <div class="cloud" style="top: -853.689px; left: 253px;"></div>
  <div class="cloud" style="top: -823.689px; left: 23px;"></div>
  <div class="cloud" style="top: -843.689px; left: 109px;"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...

javascriptjqueryhtmlcssmobile

Prevent Cordova from shrinking the view when focusing on an input

Currently working on developing an app using Cordova/Phonegap (v6.5.0). Platforms where I've installed the app: - IOS (issue identified) - Android (issue identified) - Browser (no issue found) I am facing a known problem without a suitabl ...

javascriptandroidioscsscordova

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

javascriptjqueryhtmlcss

PHP: the images uploaded are not located within the designated folder

Having trouble uploading multiple images to a folder and saving them in the database? The images are not moving to the folder, even though the code works on localhost. Here is the code snippet: var abc = 0; // Declaring and defining global incremen ...

javascriptphphtmlcss

Stop the stacking of 'display:table' specifically on Android devices

I have created a social media menu with several different links. It displays correctly in Chrome, Safari, Firefox, and Internet Explorer on iOS devices, but on Android devices, the icons stack horizontally: Here is the HTML code: <ul id="menu-social"& ...

androidhtmlcss

What is the best way to reveal the square's id value upon hovering over it exclusively?

In this assignment, I am refraining from using HTML and focusing on JavaScript to create functionality. Here's my progress so far: document.addEventListener("DOMContentLoaded", function () { let button = document.createElement('button' ...

javascriptcssdom

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

javascripthtmlcssvideoyoutube

Like button for Facebook located at the bottom of a static webpage

I am facing an issue with my web application where it does not scroll properly, especially when there is a Facebook button at the bottom. The behavior in Chrome and Firefox is inconsistent and causing some trouble. In Chrome, the div repositions correctly ...

javascriptcssfacebook-like

Is there a substitute for bootstrap select in Rails?

In order to style select tags with Bootstrap, we had to utilize the gem: bootstrap-select However, due to the high volume of options in our data-heavy application, the select dropdowns are causing significant slowdown (loading times, drop down performance ...

cssruby-on-railstwitter-bootstraphtml-select

Style the CSS elements for a specific item

I have a situation where I need to change the background image of a specific element within a CSS class without affecting others. For example, I have a class "a" with a background image that is used for multiple elements, but I only want to change the back ...

jquerycsscordova

issues with jquery functionality on user control page

For searching through dropdown lists in my project, I have implemented the Chosen jQuery plugin. In the Master page before the closing body tag, ensure to include the necessary CSS and jQuery script files. <link href="/assets/css/chosen.css" rel=" ...

javascriptjqueryhtmlcss

Enhanced Organic Draping/Drifting

Currently working on creating a basic thumbnail gallery where clicking on a thumbnail expands it to one of three sizes (square, vertical, or horizontal). However, facing the issue where expanded pictures maintain their original order instead of filling emp ...

jqueryhtmlcsscss-floatword-wrap

Prioritize the Menu display

Is there a way to bring the menu's black background in front of the body text in the image below? Here is the JSFiddle link for reference: https://jsfiddle.net/johnking/j58cubux/6/ The issue occurs when scrolling down and the menu is not clearly vi ...

htmlcss

It's proving difficult for me to align my header and navbar on the same line

Recently, I've delved into the world of HTML/CSS and encountered a challenge. My goal is to align my header (containing an h1 tag) and navbar on the same line. Ideally, the header should float left with the navbar positioned closely to its left. Howev ...

htmlcss

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

javascriptjqueryhtmlcssgoogle-chrome

Flexbox isn't lining up items horizontally as expected

I have been researching flexbox and it seems like it should display in a horizontal row by default. However, no matter what I try, I can't seem to get it to work as expected. I've included the code below. When I remove "display: flex;" from the C ...

htmlcssflexbox

How to customize JavaFx context menu appearance using CSS to achieve a full-width background color

I am trying to customize my context menu, but I'm having trouble with the white space between the menu item and the context menu border. Here is an example: view the rendered context menu with CSS styles What I want is for the color to fill the entir ...

cssjavafxcontextmenu

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Is the append() function malfunctioning in jQuery?

Why is it copying two lines when I only want one line to be cloned on button click? Is there a way to make sure that only a single line is copied each time the button is clicked? Here is my code: $(function() { $('.add-more-room-btn').clic ...

javascripthtmljquerycss

Tips for allowing a position:absolute <div> to expand as though it were containing a lengthy <p>innerText

This div automatically adjusts its width to fit the content inside, even if it extends beyond the page boundaries. Is there a way to make this div expand to fill the entire width of the page without needing a paragraph? <div style="position:absolute;le ...

htmlcsswidthcss-position