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

Re: [gradients] basics

From: Brad Kemper <brad.kemper@gmail.com>
Date: Wed, 11 Nov 2009 15:14:41 -0800
Cc: fantasai <fantasai.lists@inkedblade.net>, www-style <www-style@w3.org>
Message-Id: <B3ACB762-F4B0-41CC-A0EE-EC892E21D5C1@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>

On Nov 11, 2009, at 2:16 PM, Tab Atkins Jr. wrote:

>> Can you name a couple, besides :root (where there be magic  
>> already)? I don't
>> actually see the need for special magic on other elements just to  
>> replicate
>> what can already be done with color-stops.
> Sure.  The most important one is using background-position in the
> expected manner.  If I start with "background-image:
> radial-gradient(yellow, red);" and then apply "background-position:
> 100px 100px", I expect the gradient to shift a bit but still fill my
> box.

The reason I would find that surprising is that other images used at  
'background-size:100% 100%' (the effective result of using an  
dimensionless image as a background) don't do that. They offset the  
image and let background-color be seen. I suppose someone might use  
this as a lightweight version of inner shadow, for instance, but your  
special magic would make the gradient box inconsistent.

> Current FF and Safari behavior disagree, and there's *no way* to
> reproduce what I want using additional color stops.  The chopping
> happens while the image is being generated, and then this
> (finite-size) image is positioned/scaled/etc.

I haven't studied the radial-gradient much yet, mainly concerning  
myself with linear-gradient. But it seems like you'd be able to get  
what you want from the <bg-position> that is within the 'linear- 
gradient' value, instead of with the actual 'background-position'  
property of backgrounds and borders.

Received on Wednesday, 11 November 2009 23:15:27 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:30 UTC