Re: [gradients] basics

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'?

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