Re: [gradients] basics

On Nov 11, 2009, at 2:16 PM, Tab Atkins Jr. wrote:

>> Can you name a couple, besides :root (where there be magic  
>> already)? I don't
>> actually see the need for special magic on other elements just to  
>> replicate
>> what can already be done with color-stops.
>
> Sure.  The most important one is using background-position in the
> expected manner.  If I start with "background-image:
> radial-gradient(yellow, red);" and then apply "background-position:
> 100px 100px", I expect the gradient to shift a bit but still fill my
> box.

The reason I would find that surprising is that other images used at  
'background-size:100% 100%' (the effective result of using an  
dimensionless image as a background) don't do that. They offset the  
image and let background-color be seen. I suppose someone might use  
this as a lightweight version of inner shadow, for instance, but your  
special magic would make the gradient box inconsistent.

> Current FF and Safari behavior disagree, and there's *no way* to
> reproduce what I want using additional color stops.  The chopping
> happens while the image is being generated, and then this
> (finite-size) image is positioned/scaled/etc.


I haven't studied the radial-gradient much yet, mainly concerning  
myself with linear-gradient. But it seems like you'd be able to get  
what you want from the <bg-position> that is within the 'linear- 
gradient' value, instead of with the actual 'background-position'  
property of backgrounds and borders.