W3C home > Mailing lists > Public > www-style@w3.org > May 2011

Re: [css3-images] Changing the angles in gradients

From: Alan Gresley <alan@css-class.com>
Date: Thu, 19 May 2011 15:05:17 +1000
Message-ID: <4DD4A50D.6080800@css-class.com>
To: Brad Kemper <brad.kemper@gmail.com>
CC: Simon Fraser <smfr@me.com>, Mihai Potra <mike@mpotra.com>, "www-style@w3.org" <www-style@w3.org>
On 19/05/2011 10:11 AM, Brad Kemper wrote:
> On May 18, 2011, at 9:50 AM, Simon Fraser<smfr@me.com>  wrote:
>> The following (which assumes that gradients get animated) should
>> result in a box with a gradient whose angle remains the same
>> relative to the page on hover:
>> div { transition: background-image 1s, transform 1s; transform:
>> rotate(0deg); background-image: linear-gradient(0deg, black,
>> white); }
>> div:hover { transform: rotate(90deg); background-image:
>> linear-gradient(-90deg, black, white); }
>> Note that the the author intents the gradient to be anti-rotated as
>> the box rotates.
> I think that is an unreasonable expectation. Direction is often
> different depending on how the value is used. You don't have to look
> any further than to length values to prove it. Otherwise, your
> hypothetical author might also expect the div to hold still in the
> following example, because -50px should be always in the opposite
> direction as 50px, no matter what property or componant value it is
> in (which I think you would agree is preposterous):

The example you gave only has a relation to two axises. They are X and Y 
and they are both linear. This does not relate to rotation which is 
measured in degrees. I would expect that one day I could create a 
static gradient as Simon has illustrated in his above example in a box 
that is rotating.


Alan Gresley
Received on Thursday, 19 May 2011 05:05:46 UTC

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