CSS: Box Shadow Effects

gistfile1

/* Box Shadow Effects */

Directional Box Shadows

.drop-shadow.top {
  box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.right {
  box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.bottom {
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}

.drop-shadow.left {
  box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}


Emphesized Box Shadows

/* Dark shadow around box */
.emphasize-dark {
  box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}

/* White box shadow around box */
.emphasize-light {
  box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}

/* White inset box shadow  */
.emphasize-inset {
  box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}

/* White inset border box shadow  */
.emphasize-border {
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}


Embossed Box Shadows

/* Adds shiney inset to box */
.embossed-light {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Lifts and adds a button like effect to box */
.embossed-heavy {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.3),
    0 1px 1px rgba(255,255,255,0.9);
}