Re: CSS Gradients

Ernest Cline wrote:
> 
> As I had threatened to do, I've put together a proposal for
> adding linear gradients in CSS.
<snip/>
> Altho I have given what I feel the preferable answer should be.
> Let me know if you have any questions about the proposal,
> or if you think that anything remains unclear or underspecified

   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 it 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;
}

### represents where the gradient is painted.
... represents where the gradient exists, but is not painted.

   Obviously I can't represent the colour very well using ASCII-art, so 
you'll just have to use your imagination.

Is it rendered like this?
1.      Viewport
         +-------------------------+
start-> |.........................|
(#fff)  |........<div>............|
         |........+-------------+..|
         |.....-..|#############|..|
         |.....|..|#############|..|
         |.height.|#############|..|
         |.....|..|#############|..|
         |.....-..|#############|..|
         |........+-------------+..|
end---> |.........|---width---|.. |
(#000)  +-------------------------+


Or like this?
2.      Viewport
         +-------------------------+
start-> |.............            | -
(#000)  |........<div>            | |
         |........+-------------+  |height
         |........|####         |  | |
end---> |........|####         |  | -
(#fff)  |        |             |  |
         |        |             |  |
         |        |             |  |
         |        +-------------+  |
         |#000                     |
         +-------------------------+
          |---width---|

   Also, if it were rendered like 2, could the gradient be tiled like an 
image could be?  But that would require a 'gradient-repeat' property, 
similar to 'background-repeat'.  Also, what about top, right, left and 
bottom, and height and widht properties for gradients?

   Hopefully I've explained my problem well enough.  If not, let me know.
-- 
Lachlan Hunt

Received on Friday, 14 May 2004 06:57:45 UTC