Re: CSS Gradients

> [Original Message]
> From: Lachlan Hunt <lachlan.hunt@iinet.net.au>
>
>    I have a problem with how the 'gradient-attachment' property you 
> proposed, would cause the gradient to be rendered.  The gradient extends 
> from edge-1 (start) to the opposite edge-2 (end) of the box.  So, 
> normally, when 'gradient-attachment' has a computed value of "scroll", 
> the gradient position is relative to the box, so it is rendered 
> beginning with colour-1 at edge-1 and ending with colour-2 at edge-2. 
> Thus, the gradient height and width is equal to the height and width of 
> the box, respectively.
>
>    However, when 'gradient-attachment' has a computed value of "fixed", 
> the gradient position is relative to the viewport, and would therefore 
> rendered starting with colour-1 from the edge of the viewport.  But, 
> where does the gradient finish?  Does the gradient still extend for the 
> same length as it would have if it were set as "scroll", or does it 
> extend for the entire length of the viewport?  Of course, with fixed 
> positioning, the gradient would only be painted where it shows through 
> the box that it applies to, just as fixed background images do.
>
> eg. How is the following rule rendered?
>
> div {
>      gradient: tb #fff #000
>      gradient-attachment: fixed;
> }

If I've understood your ASCII art correctly, I believe you are using the
wrong viewport.  It is not the document viewport, but a new viewport
that the scrolling element has.  I used the same terminology that
'background-attachment' does.

Suppose that the example you gave were used for the following:

<div>Line 1<br />Line 2<br />...<br />Line 400</div>

and only 256 of the 400 lines could be shown in the element viewport.

Then given the usual initial display, Line 1 would have color #ffffff,
Line 2 would have color #fefefe, ... Line 256 would have color #000000.
That is until you scrolled the display.  Then the text would move, but the
gradient would stay so that if Lines 135 to 390 were in the element
viewport, Line 135 would have color #ffffff, Line 136 would have color
#fefefe, ... Line 390 would have color #000000.

However, there is another complication, what happens when 'overflow'
is set to "visible"?  I would say that the gradient continues past the
elements bounding box so that in the example above Line 257 would
have color rgb(-1,-1,-1), Line 258 would have color rgb(-2,-2,-2), ...
and Line 400 would have color rgb(-144,-144,-144) which for a standard
CRT would all be normalized to fall with the device gamut and become
rgb(0,0,0).

Received on Friday, 14 May 2004 07:41:59 UTC