How to create a drop shadow only on one side of an element?

by

Is there a way to drop the shadow only on the bottom?. I have a menu with 2 images next to each other. I don’t want a right shadow because it overlaps the right image. I don’t like to use images for this so is there a way to drop it only on the bottom like:

box-shadow-bottom: 10px #FFF; or similar?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color="#000000")";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color="#000000");

16 Answers
16

Leave a Comment