Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set CSS3 box-shadow not to be on top of div

Tags:

css

I have a div box with box-shadow set around it with the following CSS:

-moz-box-shadow: 1px 1px 15px #415a68;
-webkit-box-shadow: 1px 1px 15px #415a68;
-khtml-box-shadow: 1px 1px 15px #415a68;
box-shadow: 1px 1px 15px #415a68;

What can I do to make box-shadow only apply to the left, right and bottom of the div?

like image 573
Tim Avatar asked Sep 21 '11 02:09

Tim


People also ask

How do I get rid of box shadow on top?

The box-shadow styles are used to pay attention to the content. Primer CSS Box Shadow Remove style is mainly used to remove the box-shadow. To remove the box-shadow, we will add an additional class . box-shadow-none.

How do I set the box shadow on the bottom only?

Use the box-shadow Property to Set the Bottom Box Shadow in CSS. We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.

How do you put box shadow on top and bottom only?

The following example shows how to set Box-Shadow so that it will only show a shadow for the inset top and bottom of an element. The key to accomplishing this is to set the blur value to <= the negative of the spread value (ex. inset 0px 5px -?


1 Answers

You cannot do this with ONE div.

EDIT

box-shadow does not allow right and left shadows at the same time.

There is a trick, though...read on.

The rule takes four values:

  1. defines the horizontal offset of the shadow. + value for a right shadow and - value for a left shadow.
  2. defines the vertical offset. + value for a bottom shadow and - value for a top shadow.
  3. defines the blur distance
  4. defines the spread

That is all true. However, after some tests I found you can layer shadows.

All you need to do is separate the values with a comma.

So, for a left, right, and bottom shadow on one div, you can do this

box-shadow: -5px 5px 3px black, 5px 5px 3px black;

Example: http://jsfiddle.net/jasongennaro/HWCzJ/1/

like image 83
Jason Gennaro Avatar answered Oct 24 '22 20:10

Jason Gennaro