Skip to content

Instantly share code, notes, and snippets.

@sorahn
Last active August 29, 2015 14:16
Show Gist options
  • Save sorahn/7915cae6c820e351158f to your computer and use it in GitHub Desktop.
Save sorahn/7915cae6c820e351158f to your computer and use it in GitHub Desktop.
Generate an "inset" shadow on a single side of a div.
//
// @author Daryl Roberts
// @license MIT
// @url https://gist.github.com/sorahn/7915cae6c820e351158f
//
@mixin side-shadow($shadow, $side, $base-size: 50px) {
// If you need to make shadows larger than 50px, you can
// override the base size.
// Some basics.
// The child is absolute, so the parent must be relative.
// We're going to use a pseudo element to create the shadow, so
// we need to hide the overflow.
position: relative;
overflow: hidden;
// Here is the pseudo element that is going to have a shadow.
&::after {
display: block;
position: absolute;
content: "";
box-shadow: $shadow;
// If this was a fancy mixin, I might try and figure out the
// $side based on the $shadow, but I'm lazy.
// Also the top/bottom/width and the right/left/height. See
// previous reasoning.
@if $side == left {
right: 100%;
top: -$base-size;
bottom: -$base-size;
width: $base-size;
} @else if $side == right {
right: 100%;
top: -$base-size;
bottom: -$base-size;
width: $base-size;
} @else if $side == bottom {
top: 100%;
left: -$base-size;
right: -$base-size;
height: $base-size;
} @else {
bottom: 100%;
left: -$base-size;
right: -$base-size;
height: $base-size;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment