How to have complex shadow background on variable height content area via CSS?

Question

I am trying to build out a complex shadow background on a variable length content section of a website. I have tried every trick I know to make this work and just cannot figure out how to get this to work right. I am hopeful a CSS ninja here can help.

You can see an example of what I am trying to accomplish here: http://mpgnet.com/example.jpg

As you can see, the top and bottom shadows are easy. The shadows on the right-hand and left-hand sides are the trouble makers. The top and bottom 150px are different then the center portion which needs to expand as the content in the center grows vertically.

Here's where it gets super tricky: these shadows have to have a transparent background, because the background is not solid (as it is in this example image to highlight the shadows), and because the length is variable you never know where the end caps will fall on the background pattern. Because of this, I can't just make the whole thing with a repeating shadow and then cover on top of it with the top and bottom pieces.

Any suggestions/ideas/inspiration of how to accomplish this is appreciated. CSS3 usage is ok.

Answer 1

This uses CSS3 so it will not work in IE8 or older but I think I've written something you can use. You can see a working demo here. (just expand and contract the browser window to see it work).

I saw someone mentioned using border-image but this way doesn't require an image and has better browser support (IE9 notably).

I didn't do the top and bottom shadows since those don't need to expand and contract in your design.

.shadowbox {
    position: relative;
    margin: 100px auto;
    width: 80%;
}

.shadowbox:after {
    position: absolute;
    content: '';
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 20px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.7);
    border-radius: 50%;
}

.shadowbox:before {
    position: absolute;
    content: '';
    top: 10px;
    bottom: 10px;
    right: 0;
    width: 15px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.7);
    border-radius: 50%;
}

.shadowbox.content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 30px;
    z-index: 10;
}