I interpret: "orange 10px" as the pure orange will last for 10px from the center.
I interpret "#fff 38px" as white will last for 38px from the center as well. And from point of 10px to 38px on the radius, there will be a transition from orange to white.
I interpret "lightblue 80px" as pure lightblue starts from 80px from the center, and there is a trasition from white to lightblue strating from 38px to 80px along the radius.
The final assumption is that the radius of the inner circle is 80px.
I still struggle a bit with radial-gradient syntax, but you have the right idea, except 80px doesn't necessarily mean that's the size of the gradient. The radial gradient size is in the beginning of the syntax, and here's where I get confused, because the -moz- gradient syntax is different than -webkit-..
Both can handle keyword sizes like circle closest-side or ellipse farthest-corner, but when talking about pixel based sizes, it gets murky.
the first two values are position: 0% left, 100% from the top (so the bottom), the size of the gradient is 3.5em width, 8.25em height. The design of the gradient comes out as a vertical ellipse, and 30% of the way through, it stops being transparent, abruptly goes to a dark gray, then transitions to a white.
I am not sure if I properly interpret the meaning of pixels after the color stops. Can someone read my assumptions and tell me if I am correct?
This is the code
pardon my bad English.. I hope I will make sense
I interpret "#fff 38px" as white will last for 38px from the center as well. And from point of 10px to 38px on the radius, there will be a transition from orange to white.
I interpret "lightblue 80px" as pure lightblue starts from 80px from the center, and there is a trasition from white to lightblue strating from 38px to 80px along the radius.
The final assumption is that the radius of the inner circle is 80px.
Am I right?
Thank you so much for helping me.
I still struggle a bit with radial-gradient syntax, but you have the right idea, except 80px doesn't necessarily mean that's the size of the gradient. The radial gradient size is in the beginning of the syntax, and here's where I get confused, because the -moz- gradient syntax is different than -webkit-..
Both can handle keyword sizes like
circle closest-sideorellipse farthest-corner, but when talking about pixel based sizes, it gets murky.For example, I have a site that uses this syntax:
[code] background-image: -webkit-radial-gradient(0% 100%, 3.5em 8.25em, transparent 30%, #888 32%, #AAA 33%, white 35%); [/code]
Excuse the percentages instead of px's
the first two values are position: 0% left, 100% from the top (so the bottom), the size of the gradient is 3.5em width, 8.25em height. The design of the gradient comes out as a vertical ellipse, and 30% of the way through, it stops being transparent, abruptly goes to a dark gray, then transitions to a white.
I can't remember the proper Mozilla syntax to accomplish the same thing, buuut you can use this as a reference: http://developer.mozilla.org/en-US/docs/CSS/radial-gradient
No. What happens is the complete oposit and orange 10px will mean that orange's color stop is 10px from center. I hope this is helpfull to you
thanks all for help!