Hello!

Such a task: to make a div with an inner shadow only at two edges: upper and lower. In this case, the left and right shadows should not be.

Now I did it like this : one div at 25px out of the window, the other does not stretch the body, hiding the remnants of the first.

Actually the question is: is it possible to get by with one diva and how?

  • I have such an idea: since the background in any case is a texture (without it, it is not beautiful), you can draw a shadow on the texture. You can impose several backgrounds at once - one is translucent with a shadow, the other is the main one, the third is a shadow from the bottom. That's just it can greatly overload the page, and there and so a lot of images ... In short, for now I'm sitting on two divas. - Zelta

2 answers 2

You can do this:

box-shadow: inset 0 15px 15px -15px #333 , inset 0 -15px 15px -15px #333;

The shadow will be just above and below. You can see it here: http://jsfiddle.net/shpQ4/2/

I tested it only in IE 10, but I think it works in all major browsers.

Extended example: http://jsfiddle.net/TaA29/

    Online shadow generator CSS Box Shadow - very helpful at one time.

    • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦