La disminución de la caja interna sombra con CSS3

Question

me gustaría saber si (y tal vez la forma) es posible un poco de sombra de texto, como se muestra en la siguiente imagen:

La sombra está disminuyendo durante varios lista de elementos . Estaba pensando en darle a cada elemento diferentes clases de vuelo flotante dependiendo de qué elemento se esté pasando, pero ni siquiera estoy seguro de cómo obtener esas sombras decrecientes con CSS. Sería genial si alguien pudiera enseñarme cómo hacer eso. Si lo deseas, puedes usar mi código jsfiddle.

Answer 1

usted podría intentar algo como esto

demo

(haga clic en una ficha para seleccionar y ver las sombras)

y obtener el efecto usando box-shadow en pseudo-elementos de la ficha seleccionada.

debería tener este aspecto

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> 

Relevante 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

Se podría aumentar un <li> se integren en todo el ancho de la <ul>, girar y darle una sombra ..

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/