Re: [gradients] basics

On Wed, Nov 11, 2009 at 5:14 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> 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.

The offset behavior is the same for both.  The issue, though, is that
those images don't extend outside of the box anyway (especially if
you're using background-size: 100% 100% in tandem), while gradients
*do*.

On the other hand, an image which is finite but larger than the box
would work as expected - when you move it down and to the right, the
upper and left portions of the image, which were clipped by the box,
come into view.

I think the only sensical behavior is to treat a gradient identically
to how we'd treat an image which is finite but larger than the box.
The only special behavior necessary is specifying what effect
background-size has, as there is no notion of 'scaling' an infinite
image to a finite size (I'd just make clear that it scales the 'box'
that gradients use to measure out how to draw themselves).

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

Not quite.  Changing the center-point of the gradient also alters the
size and ratio of the gradient-shape (these are based on the distance
from the center-point to relevant sides or corners of the box).  For
the effect I want, this isn't good - I just want a single gradient to
move around the box.

~TJ

Received on Wednesday, 11 November 2009 23:23:22 UTC