Wondered if I could use scss to generate a gradient effect by looping through div's and adjusting the color incrementally. This is the result
A Pen by Jason Hodges on CodePen.
<!-- Create a div for each line --> | |
%div.gradient | |
- (0...100).each do |div| | |
%div{:id => "line" + div.to_s} |
Wondered if I could use scss to generate a gradient effect by looping through div's and adjusting the color incrementally. This is the result
A Pen by Jason Hodges on CodePen.
@import "compass"; | |
/*Need 'lines' var*/ | |
$lines: 100; | |
/*Starting color*/ | |
$c: #006AFF; | |
/*Multiplyer-change this value to apply major adjustment to gradient*/ | |
$m: 3; | |
/*Set the height of each line*/ | |
$h: 8px; | |
/*Style each div*/ | |
@while $lines > 0{ | |
#line#{$lines}{height: $h; | |
width: 100%; | |
background-color: $c + $lines*$m; | |
} | |
$lines: $lines - 1; | |
} | |
.gradient{ | |
background-color: grey; | |
margin: 0 auto; | |
width: 800px; | |
height: 600px; | |
} | |