Puoi creare questa linea di sfumatura sfumata usando CSS3?

Here's a picture of exactly what I'm trying to produce.Puoi creare questa linea di sfumatura sfumata usando CSS3?

ho potuto per lo stile un <hr /> utilizzando SVG come immagine di sfondo per creare questo effetto, ma vorrei essere in grado di produrre la stessa cosa usando CSS3 ho, ma ho avuto problemi.

Mi stavo chiedendo se qualche guru dei CSS là fuori potrebbe conoscere un modo per ottenere la stessa cosa o se non è realmente possibile w/puro CSS?

Grazie per qualsiasi aiuto.

fonte

2012-03-12 C.J.

ho creare l'effetto che si desidera controllare questo:

http://jsfiddle.net/fx5Lk/

fonte

2012-03-12 15:20:56 sandeep

Grande lavoro, grazie! –

L'unico problema che vedo con questo è che non scala. Se dovessi aumentare l'altezza di .bor potresti far combaciare l'ombra senza codificare l'altezza delle ombre ogni volta? –

Effettivamente impostando in alto e in basso a circa ~ (-55px); invece di impostare un'altezza su '.sha: after' praticamente lo fa :) –

ho cercato di creare l'effetto con tre strati, due sfondi con alpha opacità. Uno che inizia in alto e si ferma al centro, un altro che inizia a metà alle estremità in basso e uno sfondo con una porzione di image ripetuta sull'asse y.

seguo questo URL per il tutorial strato: http://css-tricks.com/css3-gradients/

il codice HTML, funziona solo in Chrome, sostituto/sovrascrivere la proprietà "-webkit-gradiente" per il broser specifica:

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

fonte

2012-03-12 15:58:17 rfranr

Puoi creare questa linea di sfumatura sfumata usando CSS3?

risposta

Problemi correlati