askdesign
5/26/2015 - 9:52 PM

Box Shadows

Box Shadows

/* --- Box Shadow  - 7.11.12 --- */
-webkit-box-shadow: 0 3px 3px #3c3c40;
-moz-box-shadow: 0 3px 3px #3c3c40;
box-shadow: 0 3px 3px #3c3c40;
/* Here, the first zero indicates the x-offset and the 3px indicates that we
have provided a 3-pixel offset in the y-direction. The next value of 3px
indicates the blur. This is followed by the color declaration of #3c3c40.


 /* BOX SHADOW */
 -moz-box-shadow: 0 1px 3px #777;
 -webkit-box-shadow: 0 1px 3px #777;
 box-shadow: 0 1px 3px #777;
 font: italic bold 18px/32px helvetica, arial;
}

 /* WHILE HOVERED */
 .button:hover {
 background: #FEE1A5;
 background: -moz-linear-gradient(top, #FFF, #FEE1A5 50%, #FFB829 51%, #FEE1A5 95%, #FEE1A5);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.5, #FEE1A5), color-stop(.51, #FFB829), color-stop(.95, #FEE1A5), color-stop(.96, #FEE1A5), to(#FEE1A5));
 -moz-box-shadow: 0 1px 2px black;
 -webkit-box-shadow: 0 1px 2px black;
 }

 /* WHILE BEING CLICKED */
 .button:active {
 -moz-box-shadow: 0 2px 6px black;
 -webkit-box-shadow: 0 2px 6px black;
}