4

I'm having trouble formatting my footer because the box shadow from the main content div is going over it and making it look terrible.

I have looked through some other sources with people having a similar problem to me and have tried a few "solutions" but none have seemed to solve my problem.

enter image description here

What I want to find out is there a way to remove the shadow from only the bottom using CSS or is there a way to bring my footer div forward so it hides the bottom shadow.

Here's the code for the box shadow.

box-shadow: 10px 10px 5px #888888;

Thanks in advance.

Aaron
  • 103
  • 1
  • 2
  • 8

2 Answers2

4

A possibility would be to decrease the spread radius of the box shadow depending on the blur (blur is added to the total size), e.g.:

-webkit-box-shadow: 10px 0px 6px -3px #888;
-moz-box-shadow: 10px 0px 6px -3px #888;
box-shadow: 10px 0px 6px -3px #888;

The problem which remains is that you cannot set different blur or offset values for each side. You can use tools like this to have a preview: http://www.cssmatic.com/box-shadow

Otherwise you could add another box which is used as overlay for the bottom or you go and have a look at the z-index property: http://www.w3schools.com/cssref/pr_pos_z-index.asp

xourscode
  • 89
  • 4
2

just set box shadow like 

box-shadow: 10px 0px 0px 0px #888888;
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
Ashok
  • 299
  • 3
  • 8