2012-09-25 42 views
5

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 disminución de la caja interna sombra con CSS3

enter image description here

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.

+0

+1: Cool idea! :) –

Respuesta

7

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

chrome 21 on win 7

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%; 
} 
+0

No veo sombras en Chrome ... – Kyle

+0

Solo lo he probado en Chrome y estoy viendo las sombras. Entonces debo preguntar qué versión y qué sistema operativo? – Ana

+0

V21 y Win7 :) – Kyle

1

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/

+0

Sry pasé por alto por completo su respuesta. Tienes una buena idea aquí. Gracias. – Sven

Cuestiones relacionadas