Re: radial-gradient() proposal

On Nov 5, 2009, at 10:29 AM, Brad Kemper wrote:

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

Right, but that's the longhand form, and it's OK if it's verbose. Your  
first example works just as well.

> 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):

This means something different. Here, the author is explicitly stating  
that they want a gradient at an angle that doesn't change as the box  
size changes. My argument is that this is the less common case, so  
it's OK for the syntax to be more verbose.

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

Wait, you're suggesting that if the author specifies an angle, it  
might not use that angle if the gradient is drawn into a box with a  
different aspect ratio? That seems counter-intuitive.

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

I don't seen the need for 'fixed'. If the author specifies an angle,  
it's an indication that they want the angle to take precedence; the  
gradient should always use that angle.

I just talked to our local designer, and asked him how he thought  
about gradients in his head. He immediately talked about two  
endpoints, rather than thinking of angles. In other words, he thinking  
of the gradient tool in Photoshop, not the Gradient Overlay layer  
effect.

Simon

Received on Thursday, 5 November 2009 19:33:09 UTC