Inner Box Shadow, on one or two Sides?

[StefanDrachsler]

Is it possible to have a div with an inset Shadow that just shows on the top and the bottom side?

As it is an existing webpage i’m not that flexible – e.g.: i can not increase the width and use other div’s to cover the left and right edges.

So i have a div (850px * 45px) width a horizontal gradient (c1-c2-c1) and would like to have an inner shadow on the top and the bottom.

Of course i could use png’s … but … that’s not sexy enough ;-)

thanks,
Stefan

[Senff]

If you can’t use other DIVs for left and right, can you place DIVs or P’s or other elements inside the div? If that’s the case, I would do something basic-ish like this:

[EDIT: GARBAGE CODE REMOVED]

I have not fully tested this in all browsers (I used a gradient generator and then changed a few things here and there) but perhaps you get the idea. It’s more to show you the nested divs approach for this.

See: http://jsfiddle.net/xqZ4Y/

[joshuanhibbert]

Whoa @Senff! How about just doing this: http://jsfiddle.net/sl1dr/g6rRg/

[Senff]

Much, much better. I stand corrected! I did not even think of that….. o_O

[StefanDrachsler]

@joshuanhibbert: Thanks. That is the perfect solution. I tried something similar but did not manage to find the correct values.

[joshuanhibbert]

No worries!

[Author]

Posts