W3C home > Mailing lists > Public > www-style@w3.org > December 2009

Re: [gradients] basics

From: Brad Kemper <brad.kemper@gmail.com>
Date: Mon, 7 Dec 2009 10:25:53 -0800
Cc: www-style <www-style@w3.org>
Message-Id: <E7ABC13A-35BB-44DB-B09D-43EB927D82C6@gmail.com>
To: fantasai <fantasai.lists@inkedblade.net>

On Nov 10, 2009, at 7:14 PM, fantasai wrote:

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

Just to revive this topic a little. I kind of like the idea, actually, but not all the time. For instance, take a look at the following, which used PNGs to simulate what a linear-gradient could do:


The idea is that the top layer of the background is only covering the bottom half of the gradient below it. You can see this in a recent Webkit download, and it works, and I like it. The code is this:

html { height:100%; }
body { 
	padding:0; margin:0; 
	background-image:  url(edge-darkener.png), url(chrome.png); 
	background-size:100% 50%, 100% 100%; 
	background-repeat:no-repeat, no-repeat;
	background-position:0 bottom, 0 0; }

I was thinking that perhaps to get the "infinite outside" effect you bring up, then maybe there could be a new value, such as 'background-repeat: extend' that would not repeat the image, but would should its outside, clipped only by the background painting area.
Received on Monday, 7 December 2009 18:26:42 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:41 UTC