Menu With Shadow Effect

Question

Please see the following image. I want to display some nav items in the following style.

I can display the texture box [rectangle box]. I could not display the shadow effect on the top and bottom. The shadow effect depends upon the text size. Is this possible to do? Any ideas on how to proceed?

Answer 1

You can do this using radial gradients on pseudo-elements - DEMO

CSS:

ul {
    margin: 5em auto;
    padding: 0;
    background: silver;
    text-align: center;
}
li {
    display: inline-block;
    position: relative;
    margin: 1em;
    padding: .1em 2em;
    background: #414141;
    color: white;
    text-align: center;
}
li:before {
    position: absolute;
    top: -1.3em;
    right: 0;
    bottom: -1.3em;
    left: 0;    
    background: radial-gradient(at 50% 0, rgba(0,0,0,.35), rgba(255,255,255,0)) 0 85%,
        radial-gradient(at 50% 100%, rgba(0,0,0,.3), rgba(255,255,255,0)) 0 15%;
    background-repeat: no-repeat;
    background-size: 100% .5em;
    content:'';
}

EDIT: A second version that is also supported by IE9 - DEMO

This one uses two pseudo-elements on the list item and requires that the list item has a child.

CSS:

ul {
    margin: 5em auto;
    padding: 0;
    background: silver;
    text-align: center;
}
li {
    display: inline-block;
    position: relative;
    margin: 1em;
    text-align: center;
}
li:before, li:after {
    position: absolute;
    top: -.4em;
    bottom: -.4em;
    content:'';
}
li:before {
    z-index: 2;
    right: 0;
    left: 0;
    box-shadow: 0 0 2em -.5em #000;
}
li:after {
    z-index: 3;
    right: -2em;
    left: -2em;
    background: silver;
}
a {
    position: relative;
    display: inline-block;
    padding: .1em 1.5em;
    background: #414141;
    color: white;
    line-height: 1.6;
    text-decoration: none;
    z-index: 4;
}