borresnorre
borresnorre

Reputation: 49

Shadow to the left, right and the bottom

I am using this code:

border-right:0px solid #ddd;
height:85px;    
box-shadow :5px 5px 10px 1px #eaeaea;

but i just got this results http://codepen.io/anon/pen/MpmPYq

I want to add the same width with shadow at left, buttom and the right side

I'll add this shadow to the dropdown menu at this site http://94.247.169.169/~welloteket/

Upvotes: 1

Views: 1475

Answers (2)

user7582130
user7582130

Reputation:

If you want all four sides shadowed, try this following code:

div {
-webkit-box-shadow: 0 0 100px #000;
box-shadow: 0 0 100px #000;
}

I tested this on CodePen aswell, http://codepen.io/anon/pen/RpVeRG, It is because your Y and X is offset.

If you are looking for the left, right and bottom to be shadowed.

You can use the following code instead:

-moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);

http://codepen.io/anon/pen/Ppmxoa

Upvotes: 1

Piyali
Piyali

Reputation: 506

Try this code :

div {
    height: 200px;
    width: 300px;
    margin: 50px auto 0;
    border-right: 0px solid #ddd;
    height: 85px;
    box-shadow: 5px 5px 10px 1px #eaeaea, -5px 5px 10px #eaeaea;
}
<div></div>

Upvotes: 0

Related Questions