Responsive CSS Box Shadow Rainbow Lines

Responsive CSS Box Shadow Rainbow Lines.markdown

Responsive CSS Box Shadow Rainbow Lines

My attempt at something notable for #RainbowStraightLines weekend.

A Pen by Jake Albaugh on CodePen.

License.

style.scss

// defining the relative line width 
// (think of it as a percentage of window width)
$line-width: 1;
// rem value of line width
$line-width-rem: $line-width * 1rem;

// initial element styles
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; bottom: 0;
  // initial width
  width: $line-width-rem - 0.2;
  // initial hsl color
  background: hsl(0,80,50);
  
}

// 1rem = 1% viewport width
html { font-size: 1vw; }

// number of shadows to generate (minus original element)
$line-count: 100 / $line-width - 1;
// empty shadow list
$shadow: ();
// for each line
@for $b from 1 through $line-count {
  // unique color
  $color: hsl($b/$line-count*360, 80, 50);
  // append shadow to list
  $shadow: append(
    $shadow,
    // shadow offset x
    ($line-width-rem * $b) 0px 0px 0px $color, 
    // comma separated for valid box-shadow
    comma
  );
}

body {
  background: black;
  // add box shadow to our element
  &::after {
    box-shadow: $shadow;
  }
}