Block rain!

by thirdender

HTML

<div id="grid">
    <div class="l">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>
<aside>
</aside>

SCSS

$block-size: 24px;

.angled {
  // Source: http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
  background-color: #ac0;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
    color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
    to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
}

.ib {
    display: inline-block;
}

#grid {
    @extend .angled;
    @extend .ib;
    vertical-align: top;
    background-size: 32px 32px;
    width: 240px;
    border: 2px solid #ccc;
    height: 400px;
    position: relative;
}

aside {
    @extend .ib;
    vertical-align: top;
    height: 402px;
    width: 120px;
    border: 1px solid #ccc;
}

.block {
    position: absolute;
    border: 4px outset rgba(255, 255, 255, .3);
    background: red;
    box-sizing: border-box;
   ...