CODEWITHSUNDEEP
css
Kym Gilham
Kym Gilham

Reputation: 133

css shadows on on all sides but top

hi trying to get a drop shadow on all sides but the top, for a drop down sub menu found this code on this site and it has shadow on all sides but not bottom

body {
     width: 300px;
     height: 200px;
     margin: 20px auto;

 -webkit-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 -moz-box-shadow:    0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 box-shadow:         0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999
 }

how do i change to be shadow on all sides but top?
been trying on fiddle but for the life of me cant understand the above code to change it from top to bottom shadow
http://jsfiddle.net/PuKDb/

need it to be like this one
http://jsfiddle.net/leaverou/8tgAp/
but instead of red line the shadow from above...

im a cut and paste coder so any help would be appreicated!

Upvotes: 7

Views: 10084

Answers (4)

user753531
user753531

Reputation:

Probably the author will never access this topic again, but I found out the right definition is made by two declarations, instead of 3:

box-shadow: 3px 5px 8px -1px rgba( 15, 15, 15, .8 ), -3px 5px 8px -1px rgba( 15, 15, 15, .8 );

It's hard to explain, but if you define two primary colors you will see the reason in bottom shadow:

box-shadow: 3px 3px 8px -1px red, -3px 3px 8px -1px yellow;

The presence of a non-zero integer as first value mixes the two colors, producing a new one.

The point is, defining three declarations, one of them will overlay one of the others (depending the arguments) and thus produce darker shadows.

The same is valid for vertical offset. If both them are the same (here represented by 5px), another overlay will happen, in the bottom shadow, if positive, or in the top shadow, if negative (which is not the case of the topic).

I hope it helps somebody else.

Upvotes: 2

David Nguyen
David Nguyen

Reputation: 8508

.div {
    -webkit-box-shadow: 0 3px 3px -3px #c00;
    -moz-box-shadow:    0 3px 3px -3px #c00;
    box-shadow:         0 3px 3px -3px #c00;
}

change the 2nd set of numbers according to the size and blur.

Upvotes: 0

dapperwaterbuffalo
dapperwaterbuffalo

Reputation: 2748

body {
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}

no explanation because you obviously have no interest in why it works, just that it does ;)

Upvotes: 13

Darren Burgess
Darren Burgess

Reputation: 4322

This should work for you

body 
{
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}

Upvotes: 0

Related Questions