Re: [css3-images] linear-gradient keywords and angles are opposite

On 9/06/2011 5:32 PM, Brian Manthos wrote:

Tried to correct the embedding level of the thread.

> fantasai [fantasai.lists@inkedblade.net] Sent: Wednesday, June 08,
>> On 06/09/2011 09:25 AM, Sylvain Galineau wrote:
>>
>>> Why shouldn't top mean 'towards the top' and right 'towards the
>>> right' so
>>> that transitioning from top to right is equivalent to going from
>>> 0deg
>>> to 90deg
>>> on a bearing compass ? That seems perfectly coherent to me.
>>
>> Because if my gradient has a fixed length (which is reasonably
>> common for creating edge effects via background-image), the
>> "towards the top" interpretation would place it at the bottom of
>> the box.
>>
>> I think *that* is counter-intuitive.
>>
>> ~fantasai
>
> It's not about the location after the gradient image, that's what
> background-position addresses.
>
> It's about the direction the gradient flows as it progresses through
> the color stops.


I don't believe that you should be able to animate or transition between 
values of top, right, bottom and left. It should only work with degrees. 
Secondly the default for a linear-gradient should be top. The below 
gradients would be identical.

linear-gradient(pink, orange 50px, blue 50px, lime);
linear-gradient(top, pink, orange 50px, blue 50px, lime);


Brain, it's very interesting that you mention flow. This came up in 
another discussion about flexbox, bidi and writing-mode [1]. Please see 
the part where I reply to Andrew about block-flow.

At the beginning of this current thread, I mentioned option D [2]. Did 
you yourself think about it Brian? I soon switched to option C since I 
could see Brad rampaging and dis-railing the brainstorming.

Option D would mean that the following gradients would appear identical.

-*-gradient(0deg, pink, orange 50px, blue 50px, lime); /* Current 
behavior */
gradient(0deg, pink, orange 50px, blue 50px, lime); /* New behavior */

This is how I envision option D would look with a 0 degree angle.

<!doctype html>
<style type="text/css">
div {
   height: 100px;
   width: 100px;
   background: -webkit-linear-gradient(0deg, pink, orange 50px, blue 
50px, lime);
   background: -moz-linear-gradient(0deg, pink, orange 50px, blue 50px, 
lime);
   background: -ms-linear-gradient(0deg, pink, orange 50px, blue 50px, 
lime);
   background: -o-linear-gradient(0deg, pink, orange 50px, blue 50px, lime);
}
</style>
<div>0deg</div>


Now if option D is not radical, my I suggest that when mapped to 
degrees, the linear-gradient flow is perpendicular to it's angle but 
when the angle of the linear-gradient are mapped to those of the box 
model (top, right, bottom and left) the linear-gradient flow is parallel 
to it's angle. This would mean that someone could use this.

   linear-gradient(start, pink, orange 50px, blue 50px, lime);

It would also mean that start and end values could be used for left and 
right values but start and end values would work in reverse with 
dir="rtl" or direction="rtl".

Consider the animation that I questioned Simon about [3] [4]. The margin 
box does not rotate but when you are using transform origin, you have to 
adjust the margins. Now consider that a RTL author came along and wanted 
to do the same animation by having the box run downwards along
the border-right edge of the viewport.

For both animations (in LTR and in RTL), the start of the animation 
would be the same.

   linear-gradient(0deg, pink, orange 50px, blue 50px, lime);

To keep the vertical hard color stop always orientated on the y-axis, 
for LTR, I would rotate the box clockwise and rotate the linear-gradient 
anticlockwise. For RTL, I would rotate the box anticlockwise and rotate 
the linear-gradient clockwise. The vertical hard color stop would move 
horizontally as the box rotated.

In LTR, it would follow a path like this.

  |[|]         |
  | [|]        |
  | [|]        |
  |[|]         |
  | [|]        |
  | [|]        |
  |[|]         |


In RTL, it would follow a path like this.


  |         [|]|
  |        [|] |
  |        [|] |
  |         [|]|
  |        [|] |
  |        [|] |
  |         [|]|


Now I add another gradient down the side of the border-box of the 
viewport and I want the movement horizontally to match to the 
linear-gradient of the rotating box (there's more to this gradient 
affect then you think so please no one suggest I simply have a 
transparent background).

I would use this linear-gradient,

   linear-gradient(start, pink, orange 50px, blue 50px, lime);

and use background position to keep both gradients aligned with each other.




[1] http://lists.w3.org/Archives/Public/www-style/2011Jun/0199.html
[2] http://lists.w3.org/Archives/Public/www-style/2011May/0430.html
[3] http://lists.w3.org/Archives/Public/www-style/2011Jun/0129.html
[4] http://lists.w3.org/Archives/Public/www-style/2011Jun/0137.html


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Thursday, 9 June 2011 12:46:25 UTC