Geek Answers Handbook

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

I have a div field with a box-shadow tag 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 shadow-shadow applicable only to the left, right and bottom of a div?

+4
source share
2 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 meanings:

  • determines the horizontal offset of the shadow. + value for the right shadow and - value for the left shadow.
  • determines the vertical offset. + for the lower shadow and - value for the upper shadow.
  • determines the blur distance
  • determines the spread

This is all true. However, after some tests, I found that you can layer a shadow.

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

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

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

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

+6
source 

 div div { box-shadow: 1px 1px 15px #415a68; height: 100px; width: 100px; } div { overflow: hidden; padding: 10px; padding-top: 0; } 
 <div> <div></div> </div>

http://jsfiddle.net/5rbrB/ here is an example using overflow: hidden; and padding-top: 0;

+2
source

More articles:


All Articles