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
Post a Comment