CODEWITHSUNDEEP
css
Edward G-Jones
Edward G-Jones

Reputation: 585

Set the height and width seperatly for a box-shadow?

I need to create a div that hold a dynamic amount of content with a box shadow on either side and the bottom, the top hasn't. I also need the shadow on the sides to sharply appear slightly down the div and for none of the shadows to overlay each other which darkens the shade of the particular area.
Example here:
http://jsfiddle.net/EdwardG_Jones/TBfWm/

I've tried the following way, which works, however it doesn't cover the corners and isn't a instant transition rather a gradual one as the gradient fades in:
http://jsfiddle.net/EdwardG_Jones/WC2ja/2/

box-shadow: 12px 5px 5px -10px rgba(50, 50, 50, 0.75),  -12px 5px 5px -10px rgba(50, 50, 50, 0.75), 0    7px 5px -5px rgba(50, 50, 50, 0.75);

I'll probably end up using an image for the bottom gradient and somehow create another div that sits on top of the shadow at the top to hide it without hiding the content. Not sure how I'm gonna do that. Especially in drupal, meaning its more difficult to manually hard code the divs in.

Upvotes: 1

Views: 11225

Answers (1)

Jazcash
Jazcash

Reputation: 3312

OR do whatever you need to to make the bottom, left and right borders look right and then just hide the top border with this hacky code:

div{
    margin: 20px;
    width: 200px;
    height: 400px;
    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75)
}
div:before{
     content: ""; 
     width: 200px; 
     height: 5px; 
     background: white;  
     position: absolute; 
     margin-top: -6px;
}

Fiddle.

Then feel really guilty about using it.

Upvotes: 3

Related Questions