- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 11 Nov 2009 08:31:37 -0600
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: fantasai <fantasai.lists@inkedblade.net>, www-style <www-style@w3.org>
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