Skip to content

Instantly share code, notes, and snippets.

@soulcutter
Last active December 11, 2015 18:39
Show Gist options
  • Save soulcutter/4643399 to your computer and use it in GitHub Desktop.
Save soulcutter/4643399 to your computer and use it in GitHub Desktop.
SCSS mixin creating a stacked block element
////
// Makes a div appear to be a stacked like 3 sheets of paper with each
// sheet offset by a given amount.
//
// Example: @include stacked(5px);
@mixin stacked($offset) {
border: 1px solid #494949;
&:after, &:before {
background: inherit;
border: 1px solid #494949;
bottom: ($offset + 2) * -1;
content: '';
height: 100%;
width: 100%;
left: $offset;
position: absolute;
z-index: -10;
}
&:before {
bottom: $offset * -2 - 3;
left: $offset * 2 + 1;
position: absolute;
z-index: -20;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment