Re: radial-gradient() proposal

On Nov 5, 2009, at 8:41 AM, Simon Fraser wrote:

>> In practice, most blends (and I do mean almost all) will be either  
>> from edge-to-edge (or corner-to-corner), or will start or end some  
>> distance from one of those edges or corners in a way that can be  
>> specified more clearly and succinctly in the stops.
>
> Don't forget that CSS gradients are used for more than just  
> background-image; they are a generic type of generated image that  
> might be used in a lot of other places (list-image, border-image, as  
> masks, potentially as inputs to filters). I don't want gradients to  
> be so tied to background-image that it makes them impossible to use  
> elsewhere, for example in places where background-position is not an  
> option for adjusting the location of the gradient.


Neither do I, but on the flip side, I think it is confusing when you  
ARE using this for a background, and have one <bg-position> inside the  
gradient, and another <bg-position> outside the gradient as part of  
'background-position'.

But I don't see how the other uses of a gradient image (list-image,  
border-image, etc.) is a factor in how you'd specify where the lines  
begin and end. I wasn't suggesting relying on background-position to  
indicate start and stop points. Consider the following example from  
the draft:

	linear-gradient(left 20px top 30px, yellow, blue);

And if you were to specify the end-point too, it would presumably look  
like this:

	linear-gradient(left 20px top 30px, right 20px bottom 30px, yellow,  
blue);

...or if you include the implicit stop points as percentages, like this:

	linear-gradient(left 20px top 30px, right 20px bottom 30px, yellow  
0%, blue 100%);

To me that looks like an awful mess of numbers for something that  
should be simple. Here is how that would look on a square (I've marked  
the end-points with red dots):

http://www.bradclicks.com/cssplay/XY_gradient.png


Now imagine I specified the exact same color blend like this:

	linear-gradient(-34deg, yellow 33px, blue calc(100% - 33px));
  or

	linear-gradient(-34deg, yellow 24%, blue 76%);

That seems much more clear to me. Now the gradient still fills the  
square box, but the yellow and blue are 33px (or 24%) from the corners  
at the specified angle and it is still the same gradient (I've marked  
those stops with red lines):

http://www.bradclicks.com/cssplay/simpler_gradient.png

And then, since this "image" is really dimensionless (not necessarily  
square in usage), the angle and fixed distances would be free to  
resize and and become different angles, just as they would if this was  
an EPS file (if the UA supported EPS). If you actually wanted the  
magic implicit in the current draft (that is, the dimensions and  
angles stayed the same, regardless of the final used dimensions of the  
image), then you could introduce a keyword to make that explicit. So,  
thus, the following would keep the angle the same regardless of the  
image being stretched wide or tall:

	linear-gradient(-34deg fixed, yellow 24%, blue 76%);

and if you wanted to keep the distances fixed too, then you would use  
length measures with the keyword:

	linear-gradient(-34deg fixed, yellow 33px, blue calc(100% - 33px));