Shadow Effect Menu

Question

Please view the following image. I want to display some navigation items in the following style.

I can display the texture box [rectangle]. I could not display the shadow effect above and below. The effect of the shadow depends on the size of the text. Is it possible to do this? 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 : Second Version Also Supported by IE9 - DEMO

This item uses two pseudo-items in a list item and requires that the list item has a child item.

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; }