CSS3 Inset box shadow only on the top and bottom

A short but useful snippet of code using CSS3 to create inset shadow only on top and bottom of an element.

The code essentially creates 2 inset box shadows that are bigger than the element they are called on, this would mean the shadow would not be able to be seen on any of the sides. Then I use the X offset to bring them into view, one on the top and one on the bottom.

SCSS/SASS code (with Compass):

@include box-shadow(
    0 22px 22px -22px rgba(0,0,0,0.8) inset,
    0 -22px 22px -22px rgba(0,0,0,0.8) inset
);

CSS code:


  -moz-box-shadow: 0 22px 22px -22px rgba(0, 0, 0, 0.8) inset, 0 -22px 22px -22px rgba(0, 0, 0, 0.8) inset;
  -webkit-box-shadow: 0 22px 22px -22px rgba(0, 0, 0, 0.8) inset, 0 -22px 22px -22px rgba(0, 0, 0, 0.8) inset;
  box-shadow: 0 22px 22px -22px rgba(0, 0, 0, 0.8) inset, 0 -22px 22px -22px rgba(0, 0, 0, 0.8) inset;

Example on Codepen:

See the Pen Inset shadow on top and bottom only by Jon Catmull (@catmull) on CodePen.