How to make CSS3 boxshadow on two sides of a div?

Question

Please take a look at this simple code:

http://jsfiddle.net/kerp3/

The box has an inner box shadow o all 4 sides. I need the window shadow to appear only on the left and bottom.

How to change this code:

box-shadow: inset 0 0 9px 0 #000; 

Answer 1

Whether this helps, this should work with a cross browser.

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

Here is the original author: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

Answer 2

 .shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; } 

See this page: http://css-tricks.com/snippets/css/css-box-shadow/

Answer 3

With a slight change in color and offsets, it becomes quite simple:

 div { width: 300px; height: 300px; box-shadow: inset 5px 5px 5px -3px #666; } 

jsFiddle .

Answer 4

I was going to suggest using negative values:

 div { width: 300px; height: 300px; /* Try this. */ box-shadow: inset 4px -4px 7px -4px #000; } 

The first 4px pushes the shadow field on the left by 4px, hiding what you usually see on the right if you leave it at 0.

A second value of -4px pushes the shadow vertically downward, again hiding the upper shadow.

A higher 7px blur value gives me more than I need, but if I add a 4px spread, that extra blur will be cropped. Leaving only the soft gray edge of the shadow, instead of the hard black that you usually see.

See my example here: http://jsfiddle.net/khalifah/vVUB5/

Answer 5

You cannot apply the shadow only to certain sides of the <div> , but you can adjust the X and Y offsets so that the shadow is cropped on the sides where you do not want it.

This gave me the effect you are looking for in Safari:

box-shadow: 7px -7px 9px #000 inset;