Re: [css3-images] gradients keywords and logical (Re: [CSSWG] Minutes and Resolutions Telecon 2011-08-10)

On 11/08/2011 12:21 PM, Tab Atkins Jr. wrote:
> On Wed, Aug 10, 2011 at 6:48 PM, Alan Gresley<alan@css-class.com>  wrote:
>> If I have this markup,
>>
>>   <div><div>...</div></div>
>>
>> and this CSS.
>>
>>   div div {
>>     transform: rotate(45deg);
>>     transform-origin: top left;
>>     background: linear-gradient(keyword keyword, white, blue);
>>   }
>>
>> On the rotated inner box, I want the gradient going from corner to corner
>> beginning from the visual left with white and ending on the visual right
>> with blue. I would expect to use these keywords.
>>
>>   (since I already have _transform-origin: top left_).
>>
>>     background: linear-gradient(bottom left, white, blue);
>>
>> and not this.
>>
>>     background: linear-gradient(to top right, white, blue);
>
> I don't understand the significance of the transform to this case.  If
> you prefer using a keyword to indicate the starting point rather than
> the ending point, that seems independent of whether the element is
> being rotated by a transform.  Is there something I'm missing, or is
> this just a statement that you prefer indicating the starting-point?


I prefer one step less when creating a gradient. Having just the start 
value allows one less step.

Step 1. Work out which way something is rotated. Since this may be so 
deep via several rotations on child boxes, I have to get the orientation 
right by placing a border on the box and then I give the box a side 
border if I want to rotate, offset or provide a margin to a side 
(sometimes this does not work since the edges of the box are coming out 
on the z axis, so I start using my controls [1]).

(now if I can just use the keyword for the start position, then I go no 
further)

2. If I had a top border, I now think opposite of the side of the border 
which is 'bottom' and remember to include 'to' to have 'to bottom'.


>>> TabAtkins: They're still equivalent
>>> TabAtkins: It's just a different angle computation
>>
>> Can you please explain this Tab? Can you please explain why current prefixed
>> behavior should change for keywords?
>
> Please read the "Gradient Magic" thread started a few weeks ago.  It
> seems that the behavior described therein in manifestly better than
> the previously-described behavior for corner-to-corner gradients.


I didn't read that thread since I was on the verge of pneumonia but 
regardless, I do like magic corners.

What is happening is the rectangle is being circumscribed and the start 
and end points of the gradient are situated on the circumscribing circle 
(perpendicular to the midway white line) and not the corners of the 
rectangle. It will be so much better to make solid triangle blocks of 
color in rectangles which can change shape. I has also had this in my 
mental model went wrote the below in the thread _Changing the angles in 
gradients_ [2].

   | Lets' say we rotate an element by 30 degrees (pointing
   | at 1 o'clock) and we want that strong contrast in the
   | gradient to point at 2 o'clock. The CSS we would use is
   | this.

The strong contrast (the line perpendicular to the gradient path) was 
what I saw when I first was experimenting with block color gradients. I 
saw them also as the spokes of a spinning wheel. I created this demo,

http://css-class.com/test/css/3/2d-animation/rolling-box-pi-with-inner-static-box2.htm

to show this affect but Brad's opposition to the new way degrees worked 
made me give up on this debate and uploading the demo.

One note about this demo. All three animations appear to stop as the 
animation speeds up (this affect is noticed with spokes of wheels as 
they alter speed). Gecko does this at 25 seconds and older WebKit use to 
do this at 10 seconds. Safari 5.1 seems to almost stops at 25 seconds 
and Chrome does it at 12.5 seconds. The last animation has a slim block 
color gradient (2px in length).

     linear-gradient(0deg, transparent 48px, blue 48px, blue 50px, 
transparent 50px);


>> You seem to have some mental model but more details will appear in
>> css4-images.
>
> Sorry, this was a little clearer in the call.
>
> The idea is that an animation is rendered by referencing the start and
> end state and the current completion percentage.  If the size of the
> box changes, such that the start or end states would have been
> different, the animation is changed accordingly at the next update.
>
> This isn't specific to gradients; it's a general issue with
> animations.  Run this example to see the effect in action:
>
> <!DOCTYPE html>
> <style>
> div { height: 30px; }
> #foo { -webkit-transition: width 1s linear; width: 50%; background: green;}
> #bar { -webkit-transition: width 2s linear; width: 50%; background: blue;}
> #foo:hover { width: 90%; }
> #foo:hover>  #bar { width: 10%; }
> </style>
> <div id=foo><div id=bar></div></div>


OK, good, good but can you please explain what you are seeing in your 
head? I do not have access to your head and since it may be filled with 
crack, it maybe unwise to have such access. I still don't understand why 
gradient keywords referencing the start point are confusing to you. 
Anyway, I can live with whatever is decided in regards to these keywords.


>> I believe it makes sense for the default to be '0deg' and 'top' but not
>> '0deg' and 'to bottom'. So in other words, this CSS,
>>
>>     linear-gradient(white, blue)
>>
>> will show white at the top and blue at the bottom as is currently seen in
>> all UAs that support the modern syntax.
>
> Your statement doesn't make sense.  "0deg" and "top" have *never*
> meant the same thing.  Right now, "to top" and "0deg" are the same,
> but in the older definition (where keywords specified the starting
> point), "0deg" and "bottom" were the same.


I talking about the _right now_ behavior. I am already aware of the old 
behavior since I already have experimented with gradient with angles 
(using -45deg for 'top' for example). I have quite a few demos to 
correct. For me, I relate the start points to the compass rose (X 
represent the center of rotation or the midpoint).

   TL     T     TR

          |
       \  |  /
         \|/
  L  -----X-----  R
         /|\
       /  |  \

   BL     B     BR



Each point (four sides and four corners) are on a compass rose that is 
circumscribing a box or rectangle. This is why I had this discussion [3] 
with you in another thread in May when I realized that corner to corner 
gradients were in fact inscribing the box. I made this statement back then.

   | So any transition from side (top, right, bottom and
   | left) to corner (top right, bottom right, bottom
   | left and top left) is also a transition from
   | inscribing to circumscribing.


Magic corners now rectify this dilemma.



[1] http://css-3d.org/revolution-cube.htm
[2] http://lists.w3.org/Archives/Public/www-style/2011May/0430.html
[3] http://lists.w3.org/Archives/Public/www-style/2011Jun/0421.html



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

Received on Thursday, 11 August 2011 13:21:25 UTC