CODEWITHSUNDEEP
cssshadows
recon
recon

Reputation: 59

CSS Shadows (how to get rid of top shadow?)

Got a problem with the css shadows. I can't figure out how to get rid of the top shadow here: https://i.sstatic.net/f1p1r.png

What I got: 

box-shadow: 0 -3px 4px -6px #777, 0 3px 4px 6px #ccc;

How do I do that? I want it to be on the left, right and bottom side.

Upvotes: 0

Views: 116

Answers (3)

Bharat Parmar
Bharat Parmar

Reputation: 154

try this is:

 div
    {
    width:300px;
    height:100px;
    background-color:white;
    box-shadow:0px 0px 5px #888888;
    }

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

try like so:

  box-shadow:   3px 3px 3px #777, -3px 3px 3px #777;

(adjust hex colours to match your needs)

Example - http://jsbin.com/ebemol/1

Upvotes: 1

Darren
Darren

Reputation: 70748

Looks like you need to position the vertical shadow property:

box-shadow: 0 5px 4px -6px #777

-3px would indicates that the shadow starts -3px from where the shadow would start normally, I have changed it to an arbitrary value, 5px so it starts further down.

http://jsfiddle.net/9Dgtj/

You can see from the JS Fiddle I have provided that adjusting the vertical shadow (5px) moves the shadow down.

Upvotes: 0

Related Questions