Grow your CSS skills. Land your dream job.

Am I right?-pixel values after color stops in radial gradients

  • # December 12, 2012 at 12:16 pm

    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

    background: -moz-radial-gradient(400px 50%, circle, orange 10px, #fff 38px, lightblue 80px);

    pardon my bad English.. I hope I will make sense

    1. I interpret: “orange 10px” as the pure orange will last for 10px from the center.

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

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

    # December 12, 2012 at 4:12 pm

    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.

    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%);

    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](http://developer.mozilla.org/en-US/docs/CSS/radial-gradient “”)

    # December 12, 2012 at 6:18 pm

    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

    # January 4, 2013 at 3:33 pm

    thanks all for help!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".