How to set a box shadow on left or right only or just on a single slide

Recently I wanted to create a container which only had a shadow on one edge - the top edge. Here's a simple approach to achieve it with pure css syntax. Check out the jsfiddle for the css classes written in the handy scss syntax.

TLDR, Here's a JSFIDDLE with the SCSS classes.

.shadow-top {
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 0 -5px 5px -5px black;
}

The key ingredient here is the negative value of the 'spread-radius' property, negative values of which cause the shadow to shrink. This shrinking, in combination with the offset, gives an appearance that the shadow is only on one edge of the box. The interesting thing is that box shadow allows multiple shadows, separated by a comma. You can combine that to have shadows in multiple directions. e.g

box-shadow: 0px 5px 5px -5px black, 0px -5px 5px -5px black;

References

A github gist
http://stackoverflow.com/a/6671887/226953

css 17