Re: [gradients] basics

On Nov 11, 2009, at 8:56 AM, Tab Atkins Jr. wrote:

>>> Really?  :root is magic - it allows backgrounds to overflow itself
>>> normally.  Having a gradient act differently (that is, actually
>>> clipping to the :root's background-size) would actually screw things
>>> up quite a bit in that case.  I *often* resize <body> and set a
>>> too-large background on it.
>>
>> OK, that makes sense.
>
> All right, so current clipping behavior *isn't* quite what we want.
> At least in some cases we *do* want it to act like an infinite image.

Well, perhaps. I had assumed that 'background-size:100% 100%' on  
the :root (or in HTML on the BODY or HTML elements) would size any  
background-image to fill the viewport (as with 'background-color'),  
but I just tested this (with an ordinary PNG image) and was surprised  
by the results. In recent Webkit and Firefox nightlies, it only sized  
it to the actual body height.

If this is the right behavior for background-images, then a little  
magic could be warranted, I suppose. but if :root is already doing  
some magic for background-color, why not have it do the same sort of  
thing for 100% height background-images of all sorts on the :root?  
That seems like the most logical thing to me.

>
>> Hmmm. It still seems like more magic than we need. If you want the  
>> color
>> stops to be closer together while still having the color flow to  
>> the edges,
>> why not just set them closer together?
>
> You're the one that came up with the example.  ^_^

Heh. I was actually thinking of fantasai's 'background-size:50%'  
example. But I get your point. Yes I could add four more color stops  
to do that (for horizontal or vertical gradients). OR in fantasai's  
example just adjust the position of the existing outside color stops  
(and it works at any angle).

Thus my example would need to be:
	background-image: linear-gradient(-90deg, transparent, transparent  
16px, red 16px, yellow calc(100% - 32px), transparent calc(100% -  
32px), transparent)
...instead of
	background-size: calc(100% - 32px);
	background-image: linear-gradient(-90deg, red, yellow)

vs. fantasai's example (with the above colors and angle) would be:
	background-image: linear-gradient(-90deg, red 25% , yellow 75%)
...instead of
	background-image: linear-gradient(-90deg, red, yellow)
	background-size: 50%;
	background-position: center;

I can live with it either way, but both the examples above, the code  
is shorter when NOT using infinite clipping, so I prefer no extra magic.

> In general, though, I don't think there's a correct solution to this.
> I know of several places where I'd want it to act like an infinite
> image,

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.

And it's clip region is not really infinite is it? I assume  
'background-clip' still clips it (to the border-box, by default).  
Otherwise, every text span with a gradient background would fill the  
screen. That is clearly not desirable.

> but there are certainly also cases where you want it to be
> finite (without repeating).  Luckily we've already got stuff in the
> works to address this - Moz has the -moz-image-rect() function already
> which clips an image to a specific region.  Can we just ensure that
> image-rect() makes it into CSS3 Images

I'd like image-rect() regardless....

> and call it a day?  I can
> revise the gradient section to more clearly explain the infinite-ness
> of the generated image.

Attachments

Received on Wednesday, 11 November 2009 18:56:27 UTC