css - CSS3 Elliptical Gradient in Chrome -


i'm trying elliptical gradient in chrome. i've tried

    background-image:     -webkit-gradient(ellipse, center top, 0, center top, 50, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))),     -webkit-gradient(linear, 50% 100%, 50% 0%, from(#0a6b9a), to(#29abe2)); 

no luck. i've tried few other things i've found on net , in books , fails or comes out circles.

its easy through firefox (cool effect interested):

    background-image:     -moz-radial-gradient(40% 0%, circle, rgba(0,0,0,0), rgba(0,0,0,.5)),     -moz-linear-gradient(50% 100%, #0a6b9a, #29abe2); 

is possible in chrome? should possible according planned specs gradients i've seen. maybe chrome hasn't supported yet.

**edit oh , i've checked, style not being overwritten or such jazz

-moz css property reserved firefox - that's why doesn't work in chrome (and in other browser).

to more specific, every css property started - not standard , work specific browsers. it's used compatibility. if browser doesn't understand property means, skips it, that's why in css files there multiple properties, , it's same reason -moz , -webkit not work everywhere (not you).

for css3-compatible browsers should tone in w3c convention, like

background: radial-gradient(ellipse @ center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); 

(the colours different, note background: radial-gradient(ellipse ...)

you may use http://www.colorzilla.com/gradient-editor/ or onther css gradient generator this, set orientation radial.


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -