Skip to content

Instantly share code, notes, and snippets.

@elmarti
Last active October 22, 2017 11:39
Show Gist options
  • Save elmarti/d01e53698b7fdc9a151729e4d9bd62c8 to your computer and use it in GitHub Desktop.
Save elmarti/d01e53698b7fdc9a151729e4d9bd62c8 to your computer and use it in GitHub Desktop.
Sass function to generate a stack of paper, influenced by this article https://css-tricks.com/snippets/css/stack-of-paper/#comment-1612614, written on Sass Meister https://www.sassmeister.com/gist/d01e53698b7fdc9a151729e4d9bd62c8
<div class="paper">
Howdy
</div>
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
//box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
@function paperShadow($depth) {
$val: 0 -1px 1px rgba(0,0,0,0.15);
@for $i from 1 through $depth {
$v-offset: 10 * $i;
$spread-radius-layer: $v-offset /2;
$spread-radius-shadow: $spread-radius-layer - 1;
//Create new layer
$val: #{$val} , 0 -#{$v-offset}px 0 -#{$spread-radius-layer}px #eee ;
//Create shadow for layer
$val: #{$val} , 0 -#{$v-offset}px 1px -#{$spread-radius-shadow}px rgba(0,0,0,0.15);
}
@return $val;
}
.paper {
background: #fff;
box-shadow:paperShadow(2);
/* Padding for demo purposes */
padding: 50px;
}
body {
background-color: #333;
padding: 5em;
}
.paper {
background: #fff;
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15), 0 -10px 0 -5px #eee, 0 -10px 1px -4px rgba(0, 0, 0, 0.15), 0 -20px 0 -10px #eee, 0 -20px 1px -9px rgba(0, 0, 0, 0.15);
/* Padding for demo purposes */
padding: 50px;
}
body {
background-color: #333;
padding: 5em;
}
<div class="paper">
Howdy
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment