Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making a <div> with a drop shadow only on the left and right sides

Tags:

css

dropshadow

My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.

The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.

As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.

For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.

I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:

  1. I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the #container div background-image, but, probably because the #container itself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.

  2. I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.

How do I make this work?

like image 474
Chopper Avatar asked Apr 03 '11 19:04

Chopper


People also ask

How do you box shadow left and right?

Simply apply the following CSS to the element in question: box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */ clip-path: inset(Apx Bpx Cpx Dpx); Where: Apx sets the shadow visibility for the top edge.

How do you put a box shadow on the right side?

box-shadow: h-offset v-offset blur spread color; box-shadows values: h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of the box and a negative value is used to set the shadow on the left side of the box.

How do you make a box shadow left in CSS?

That syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.


1 Answers

You could try something like this:

box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;

Of course, mess around with the values until it suits you.

like image 99
Shaz Avatar answered Sep 19 '22 18:09

Shaz