Re: [gradients] basics

On Wed, Nov 11, 2009 at 1:46 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Nov 10, 2009, at 7:14 PM, fantasai wrote:
>> :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.
>
> 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.

>> 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.

~TJ

Received on Wednesday, 11 November 2009 14:32:13 UTC