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

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

From: Sylvain Galineau <sylvaing@microsoft.com>
Date: Thu, 9 Jun 2011 14:43:06 +0000
To: Alan Gresley <alan@css-class.com>, Brian Manthos <brianman@microsoft.com>
CC: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <3C4041FF83E1E04A986B6DC50F0178290321CB@TK5EX14MBXC297.redmond.corp.microsoft.com>


[Alan Gresley:] 
> 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.

That is one option. From a usability standpoint, I'd feel happier if all 
values could be transitioned e.g. if the author didn't to rewrite a gradient 
once he decides to add a small transition effect. As an implementor though,
it'd definitely simplify my life.

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

Mind elaborating on why you think the default should be top ? Or is it
related to the discussion below ?

> 
> 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 14:43:45 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:41 GMT