Re: [gradients] basics

On Nov 11, 2009, at 6:31 AM, Tab Atkins Jr. wrote:

>> Hmm. I would find that unexpected for both root and background- 
>> size: 50%.
>> The root does not have a background painting area to clip to with
>> 'background-clip'?
>
> 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.

>
>>> 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.)
>>
>> I can imagine wanting a light gradient that did not actually touch  
>> the
>> border, but was outside the content-box... like maybe
>>
>>  padding:32px;
>>  background-size: calc(100% - 32px);
>>  background-image: linear-gradient(...)
>>  background-position: center;
>>  background-repeat: no-repeat;
>
> Worst case, you can simulate clipping by adding two transparent stops
> at the beginning and end.  "linear-gradient(transparent 0%, white 0%,
> black 100%, transparent 100%)" looks exactly like a gradient that got
> clipped.  This doesn't work for gradients at angles other than
> multiples of 90deg, but shrug.

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?

Attachments

Received on Wednesday, 11 November 2009 16:20:00 UTC