Re: [gradients] basics

Brad Kemper wrote:
> On Nov 10, 2009, at 12:23 PM, fantasai <fantasai.lists@inkedblade.net> 
> wrote:
> 
>> Now I think gradients should behave a little special in how they clip.
>> They should have a size, but their clip rect should be infinite. So if
>> you specify a gradient on the root element, it is sized and positioned
>> as for the root element, but its paint continues beyond the box to fill
>> the canvas. Similarly a gradient with 'contain' should be sized to that
>> container, but its paint should continue to fill the entire background
>> painting area.
> 
> Since the image has no intrinsic dimensions or aspect ratio, 'contain', 
> 'cover', 'auto', and '100%' would all have the same effect. The gradient 
> image would be stretched to fill the entire background painting area.
> 
>> I'd even say any background-size value would size the
>> gradient but not clip it unless the gradient were repeated in that
>> dimension.
> 
> I don't think I'd agree. Imagine the following:
> 
> Linear-gradient(0deg, black -40%, white, black 140%)
> 
> What I expect from this is to create an image with a horizontal 
> gradient, where a 0% color-stop would align with the left edge of the 
> image, and a 100% color-stop would align with the right edge of the 
> image. Since I specified color-stops outside that range and colored them 
> black, I'd expect the color at those edges to be some shade of gray. 
> With auto sizing, at least, the absolute black would not be seen.

If you mean
   background: Linear-gradient(0deg, black -40%, white, black 140%)
then that would still work as you expect. the difference is that if
you specify this on the root element, where the background is painted
outside the positioning and sizing rectangle, the gradient wouldn't
suddenly get clipped: it would continue beyond the root element's
dimensions, and in that case you might get some visible black if the
140% stop is within the viewport.

:root { background: linear-gradient(black, white); } would look like:

   +-------------------------------+
   |###############################|   the outer box is the viewport
   |###############################|   the inner box is the :root
   |##### +-----------------+ #####|
   |######|#################|######|
   |## ## |# ## ## ## ## ## |# ## #|
   |# # # | # # # # # # # # | # # #|
   |#  #  |  #  #  #  #  #  |  #  #|
   |      |                 |      |
   |      +-----------------+      |
   |                               |
   +-------------------------------+

I'm also pondering having
   background-size: 50%;
   background-position: center;
   background-repeat: no-repeat;
allow the gradient continue outside the 50% box in the center instead of
clipping. This parallels the behavior for :root, where the background
positioning box is different from the background clipping box. I'm mainly
suggesting this because I can't really see a use case for sharply clipping
the gradient separately from the rest of the background. (So, to reuse
the above diagram, the inner box would be the 50% rectangle, and the outer
box would be the background painting area.)

~fantasai

Received on Wednesday, 11 November 2009 03:14:47 UTC