¿Puedes crear esta línea sombreada del estilo del degradado usando CSS3?

Here's a picture of exactly what I'm trying to produce.¿Puedes crear esta línea sombreada del estilo del degradado usando CSS3?

que he podido con el estilo de un <hr /> usando SVG como imagen de fondo para crear este efecto, pero me gustaría ser capaz de producir lo mismo usando CSS3 tengo, pero he tenido problemas.

Me preguntaba si algún gurú de CSS podría saber una forma de lograr lo mismo o si no es realmente posible con CSS puro.

Gracias por cualquier ayuda.

Fuente

2012-03-12 C.J.

que crean el efecto que desea por favor, compruebe lo siguiente:

http://jsfiddle.net/fx5Lk/

Fuente

2012-03-12 15:20:56 sandeep

Gran trabajo, gracias! –

El único problema que veo con esto es que no escala. Si tuvieras que aumentar la altura del árbol, ¿podrías obtener la sombra para que coincida con la codificación dura de la altura de las sombras cada vez? –

Ajustando la parte superior e inferior a ~ (-55px); en lugar de establecer una altura en '.sha: after' casi hace esto :) –

Intenté crear el efecto con tres capas, dos fondos con la opacidad alfa. Uno que comienza en la parte superior y se detiene en el medio, otro que comienza en el medio en los extremos en la parte inferior, y un fondo con una porción del image repetido en el eje y.

que siguen este URL para el tutorial capa: http://css-tricks.com/css3-gradients/

el código HTML, sólo funciona en Chrome, sustituto/sobrescribir la propiedad "webkit-pendiente" para el broser específica:

<html> 
    <head> 
    <style> 
    .gradient { 
    width:76px; 
    height:200px; 
    border:0; 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(192,192,192,1)), to(rgba(192,192,192,0))), 
        -webkit-gradient(linear, 0% 50%, 0% 100%, from(rgba(192,192,192,0)), to(rgba(192,192,192,1))), 
        url(http://i41.tinypic.com/omwky.gif); 
    background-repeat:repeat-y,repeat-y, repeat-y; 
    } 
    </style> 
    </head> 
<body> 
    <hr class="gradient"/> 
</body> 
</html>

Fuente

2012-03-12 15:58:17 rfranr

¿Puedes crear esta línea sombreada del estilo del degradado usando CSS3?

Respuesta

Cuestiones relacionadas