Re: [gradients] basics

On Dec 8, 2009, at 10:23 AM, "Tab Atkins Jr." <jackalmage@gmail.com>  
wrote:

> On Tue, Dec 8, 2009 at 11:50 AM, Brad Kemper <brad.kemper@gmail.com>  
> wrote:
>> On Dec 7, 2009, at 4:25 PM, Tab Atkins Jr. wrote:
>>> This still doesn't seem consistent with how no-repeat works for  
>>> other
>>> images, though.
>>
>> With other images, the entire image fits within the 'background- 
>> size' dimensions. I am saying gradients should also, except when  
>> there is some value to say otherwise.
>
> No it doesn't, and that's probably why we're arguing - you have a
> slightly incorrect notion of when the clipping normally occurs, so
> you're not seeing the problems that I'm pointing out.

I dont think so  You're talking about two different clippings. The  
background painting area clips the entire background. But you are  
talking about an image that, unlike any other type of image, is not  
clipped by it's own dimensions. It is this new unclipped effect that  
should be controllable.

> With an ordinary image, if it's too large to all fit within the
> background-painting area, nothing special occurs.  The full image is
> painted onto an infinite canvas and positioned/scaled/repeated/etc.
> Finally, when it actually paints onto the element's background layer,
> the end-result of the transformations is clipped appropriately.  (In
> practice this isn't exactly right, but it should generally be
> blackbox-indistinguishable.)  The fact that this clipping only occurs
> at the very end is crucial to the workings of CSS Sprites, for example
> - if it clipped the source image at the beginning, you couldn't use
> spriting techniques at all.

You aren't telling me anything new.

> Because of this, I consider it inconsistent to have gradients clipped
> by default at the image level.  They're infinite in size, and should
> be treated as such.

If I have 'background-size:100px 100px', that is a finite size. The  
only thing inconsistent is the notion that the gradient is infinite in  
size. It has dimensions once I apply a size to it. I don't mind saying  
that it's color CAN extend beyond those dimensions (if an appropiate  
background-* value triggers this), but there is still a sized image,  
and it can be repeated with background-repeat or offset with  
background-position, or be affected by any other background property  
(to do otherwise would be needlessly inconsistent). It's just a matter  
of how smartly it is repeated, and when do you let the color expand  
beyond the size you've given the tile through 'background-size'.  
Obviously, you wouldn't want that infinite color if you had a small  
image being repeated in all directions (background-repeat: repeat). At  
least I wouldn't.

>  The final painting step applied to the element
> would still be clipped as normal, of course, but any transformations
> applied to the source image before this point would be working with an
> infinite-size image.

If I have 'linear-gradient(90deg,black,white)', and 'background-size: 
100px 100px', then the black will start on the bottom of a 100px tall  
box, and blend to white at the top of that 100px box. I can then use  
background-repeat to repeat that tile across the infinite canvas and  
clip it with background-clip. I can use background-position to say  
where that tiking starts  The image is not infinite in this case, and  
I get a sort of horizontal corduroy wallpaper effect. This is  
completely consistent with how images currently work.

>
>> With the repeat effect, you are talking about something that few  
>> authors need to begin with. For those that do want an infinitely  
>> repeating linear gradient, its not going to be in a list-item- 
>> image, its going to almost always be in a background (you could put  
>> it into a border-image with 1px or 0px slices, I suppose, but its  
>> not terribly useful that way, and you are mostly just simulating a  
>> background layer anyway at that point).
>
> I think a repeating radial gradient is a valid list-style-image,

Really? See a lot of those, do you? Its not a big download to do that  
today, so there must be a lot of examples of this in the wild if it is  
a common use case. How many times can you practically repeat the color  
stops, and do you not clip them either? Are we really going to  
optimize for such a fringe edge use case, when you can easily just add  
more color stops when you want anyway?

> and
> using a repeating gradiant on border-image is definitely useful as
> well.  border-image has special properties, like the ability to paint
> outside of the box geometry, that could be desired.

Well, by that logic, we should add all the background properties to  
linear-gradient. Then I can use a tiny repeating pattern, and have it  
extend beyond the box, or have a hole cut in the middle.

Maybe SVG filters would let you apply any background (gradient or not)  
to a border or border-image, and then you don't need to recreate  
backgrounds within an image in other ways.

>> I disagree. We already have everything we need to size and position  
>> an image in a background. The example I gave is just one case where  
>> I wouldn't want the image to repeat. Here is another:
>>
>> http://www.bradclicks.com/cssplay/linear-gradient/limited-gradient.html
>
> I can provide an example of the opposite - consider a
> background-attachment:fixed gradient.  If the gradient itself is
> clipped by the box, then as soon as you scroll you'll immediately see
> the edge of the image and background-color behind it.
> background-attachment:fixed normally relies on things being repeated,
> but for gradients it's perfectly valid to have them not repeat, but
> rather just extend onward.

Exactly. It's not being repeated, because you have background- 
repeat:extend, and you get the effect you want.

> In general, though, this is an issue of consistency.

I agree.

> Why would you
> want completely different behavior for 'very large' images versus
> 'infinite' images?

You are the one being inconsistent by insisting that something with a  
background-size applied to it is infinite. If a 100px by 100px image  
is infinite or background-repeat is ignored, that is very  
inconsistent. I am saying it souls be MORE consistent, and that the  
"infinite extending of the color at the edges" effect be something  
that you can switch on when the image is not repeating.

> Both of them can extend far outside of the
> background-positioning area.  Clipping infinite images to the box but
> *not* clipping very large images in the same way will be confusing and
> frustrating.

It is far more confusing to set up an image at a certain size and then  
pretend it has no size.

> If you want the ability to arbitrarily clip an image to
> certain dimensions (and you've made good cases for the ability to do
> so), then we should introduce that ability, through an image-rect() or
> similar function.

We already have everything we need to size and position an image in a  
background.

Received on Tuesday, 8 December 2009 20:13:05 UTC