diminuendo scatola interna ombra con CSS3

Question

Vorrei sapere se (e forse come) un po 'text-shadow, come mostrato nella seguente immagine è possibile:

L'ombra è in diminuzione su più list-elementi . Stavo pensando di assegnare a ogni elemento classi di hover diverse a seconda dell'elemento su cui si sta muovendo, ma non sono nemmeno sicuro di come ottenere ombre così decrescenti con i CSS. Sarebbe davvero bello se qualcuno fosse in grado di insegnarmi come farlo. Se vuoi puoi usare il mio codice jsfiddle.

Answer 1

si potrebbe provare qualcosa di simile

demo

(fare clic su una scheda per selezionare e vedere le ombre)

e ottenere l'effetto utilizzando box-shadow sulla pseudo-elementi della scheda selezionata.

dovrebbe assomigliare a questa

HTML:

<ul class='tabs'> 
    <li><a href='#' tabindex='1'>1st tab</a></li> 
    <!-- as many tabs as you would like --> 
    <li><a href='#' tabindex='1'>aaand another tab</a></li> 
</ul> 

Rilevante CSS:

.tabs { overflow: hidden; margin-top: 7em; list-style: none; } 
.tabs li { float: left; border-right: 1px dotted #222; } 
.tabs a { 
    display: block; 
    position: relative; 
    padding: 1em .66em; 
    font: .66em/1.1 sans-serif; 
    text-transform: uppercase; 
    text-decoration: none; 
} 
.tabs a:focus { 
    z-index: 3; 
    outline: none; 
    box-shadow: 0 -.5em 1.5em black; 
    background: lemonchiffon; 
} 
.tabs a:focus:before, .tabs a:focus:after { 
    position: absolute; 
    bottom: -1px; 
    width: 30em; height: 1px; 
    box-shadow: 0 0 20px 1px black; 
    content: ''; 
} 
.tabs a:before { 
    left: -30.5em; 
    transform: rotate(-3deg); 
    transform-origin: 100% 100%; 
} 
.tabs a:after { 
    right: -30.5em; 
    transform: rotate(3deg); 
    transform-origin: 0 100%; 
} 

Answer 2

Si potrebbe convertire un <li> di sedersi all'interno l'intera larghezza del <ul>, ruotarlo e dargli un ombra ..

HTML:

... 
    </li> 
     <li class="shadow">1</li> 
    </ul> 

CSS:

ul 
{ 
    overflow: hidden; 
    height: 50px; 
} 

li.shadow 
{ 
    width: 100%; 
    height: 100%; 
    position: relative; 
    top: 15px; 
    box-shadow: 0px 0px 45px #000; 
    -webkit-transform:rotate(-1deg); 
} 

http://jsfiddle.net/Kyle_Sevenoaks/4Luet/1/