CSS Raindrops (simple version).markdown

CSS Raindrops (simple version)

Simple version of the CSS Raindrops experiment, for a demonstration.

A Pen by Lucas Bebber on CodePen.

License.

index.html

.container
  .window
  .raindrops
    .borders
      - (1..100).each do
        .border
    .drops
      - (1..100).each do
        .raindrop

style.css

// our background image.
// will be used for the window as well as
// the raindrops themselves
$image: 'http://i.imgur.com/xQdYC7x.jpg';

// container width and height.
// 100vw/vh so it fills the entire window
$width:100vw;
$height:100vh;

//number of raindrops
$raindrops:100;

body{
  background:#222;
}
.container{
  position:relative;
  width:$width;
  height:$height;
  overflow:hidden;
}
.window{
  position:absolute;
  width:$width;
  height:$height;
  background:url($image);
  background-size:cover;
  background-position:50%;
  filter:blur(10px);
}
// set all the containers to
// position:absolute, since 
// they will overlap
.raindrops,
.borders,
.drops{
  position:absolute;
}

// little brightness filter so our raindrops look shiny
.drops{
  filter:brightness(1.2);
}

// general settings for all the 
// raindrops and borders
.raindrop{
	position:absolute;
  border-radius:100%;
	background-image:url($image);
	background-size:$width*0.05 $height*0.05;
  background-position:50%;
	transform:rotate(180deg) rotateY(0);
}
.border{
	position:absolute;
	margin-left:2px; 
	margin-top:1px;
	border-radius:100%;
	box-shadow:0 0 0 2px rgba(0,0,0,0.5);
  transform:rotateY(0);
}

// looping through each one of them
@for $i from 1 through $raindrops{

  // generates a random number from 0 to 1, for the positioning
  $x:random();
  $y:random();

  // Random raindrop size and stretching.
  // Since each raindrop has different sizes, we'll do our sizing calculations here instead of on the main .raindrop selector
 	$drop-width:5px+random(11);
 	$drop-stretch:0.7+(random()*0.5);
	$drop-height:$drop-width*$drop-stretch;
	.raindrop:nth-child(#{$i}){
		// multiply the random position value by the container's size
		left:$x * $width;
		top:$y * $height;
    
		width:$drop-width;
		height:$drop-height;
    background-position:percentage($x) percentage($y);
	}

	.border:nth-child(#{$i}){
		// we'll do the same positioning for the drop's border
		left:$x * $width;
		top:$y * $height;

		width:$drop-width - 4;
		height:$drop-height;
	}
}