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

On 12/08/2011 1:10 AM, Brad Kemper wrote:
>
> On Aug 11, 2011, at 6:21 AM, Alan Gresley wrote:
>
>> On 11/08/2011 12:21 PM, Tab Atkins Jr. wrote:

>>> 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]).
>
> If you are saying the gradient direction should be applied based on
> where you end up after a transformation, then I strongly disagree.


I'm not saying that at all. What I am staying is that I have created 
animations and not known where 'top', 'bottom', 'left' or 'right' are on 
certain elements. I may pick a side (what I can visually see) that I 
want an affect to begin/appear on but first I must know which side this 
is. To do this, I start adding borders.


> I don't think most people are going to need to know which way
> something is rotated in order to decide which direction the gradient
> should go.  It is often a background of a box with some text in it,
> and the gradient will need to remain at the same angle relative to
> the text, not relative to the transform.


Text (or line boxes) remain relative to the transformed block. Inline 
elements remain relative to the transformed parent block so gradients 
themselves remain relative to the transform block.


> This is how it is for every
> other background-image, including repeated raster images used in
> legacy browsers to get a gradient effect. I do not want to look at
> something that has gone through several transformations and is now
> rotated 51.673deg, and then try to figure out which direction to use
> now in order to get the direction relative to before the transform.


Since gradients remain relative to the transform block, you don't have 
to do a thing.


> And I always want to know what it is before the transformations, so
> that the background images rotate right along with everything else in
> the element.


I can understand this since this appears to be what happens.


>> (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'.
>
> You shouldn't let the things you learned during an experimental phase
> prevent you from learning a revised syntax. If we waited until we had
> the perfect keywords that everyone could agree were the best, we'd
> still be arguing about it 5 years from now. We compromised, and
> settled for something good enough for most. When learning the syntax,
> some people will have a slightly harder time learning it one way and
> others will have a slightly harder time learning it the other way,
> but it is still easily learnable either way, and unambiguous this
> way. There seemed to be somewhat stronger feelings for picking a "to"
> direction for the model than for a "from" direction, so that won out
> in the compromise.


As I have mentioned before, gradients (nor any other background image) 
do not have a direction. Gradients are not compass bearings. Gradients 
can go from 0% to 100% and there is a path between these extreme points. 
The start of the gradient can theoretically be infinite and the ending 
can be infinite so theoretically the gradient is infinite in length. 
There is certainly an ordering in color stops but ordering is not a 
direction.

Another reason that I see _direction to_ notation as wrong is that the 
syntax can not be extended in future and have it make sense. If it was 
possible to have the beginning of the gradient from 'top' and the end of 
the gradient to 'bottom right',

  -----T-----
  |     \   |
  |      \  |
  |       \ |
  |        \|
  ---------BR


then having the 'to bottom' instead of 'top' complicate things. You 
could write this,

     _top to bottom right_


where the reverse does not make sense.

    _to bottom from top left_


and indicates a different vector.


  TL---------
  |\        |
  | \       |
  |  \      |
  |   \     |
  -----B-----


>>> 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...
>
> Sorry, but I didn't really follow what you're trying to say here, or
> if there was something you didn't like about "magic corners".
>
> P.S. I hope we can eventually stop calling it that. There is nothing
> especially magical about picking the appropriate angle for connecting
> the corners.


Please take a look at the below code. This is what I mean by 
circumscribing a rectangle. The first color stop (red) is 30% down the 
gradient path and the last color stop (blue) is 70% down the gradient 
path. What happens when you transition from corner to side to corner. Do 
these color stops slide up and down the gradient path. As the code below 
now stands, the white midway line (perpendicular to the path) is 
situated on the 'top right' and the 'bottom left' of the rectangle but 
'to bottom right' is suppose to indicate the rendering of this gradient.


<!DOCTYPE html>
<style>
  #outer {
    width: 400px;
    height: 400px;
    margin: 50px;
    border-radius: 201px;
    border: 2px solid olive;
    background: -webkit-linear-gradient(-15deg, transparent 29.5%, black 
29.5%, black 30%, transparent 30%, transparent 70%, black 70%, black 
70.5%, transparent 70.5%) center no-repeat, 
-webkit-linear-gradient(-105deg, transparent 49.75%, green 49.5%, green 
50.25%, transparent 50.25%);
    background: -moz-linear-gradient(-15deg, transparent 29.5%, black 
29.5%, black 30%, transparent 30%, transparent 70%, black 70%, black 
70.5%, transparent 70.5%), -moz-linear-gradient(-105deg, transparent 
49.75%, green 49.5%, green 50.25%, transparent 50.25%);
    background: -ms-linear-gradient(-15deg, transparent 29.5%, black 
29.5%, black 30%, transparent 30%, transparent 70%, black 70%, black 
70.5%, transparent 70.5%), -ms-linear-gradient(-105deg, transparent 
49.75%, green 49.5%, green 50.25%, transparent 50.25%);
    background: -o-linear-gradient(-15deg, transparent 29.5%, black 
29.5%, black 30%, transparent 30%, transparent 70%, black 70%, black 
70.5%, transparent 70.5%), -o-linear-gradient(-105deg, transparent 
49.75%, green 49.5%, green 50.25%, transparent 50.25%);

}
  #inner {
    width: 200px;
    height: 402px;
    margin-left: 100px;
    margin-top: -1px;
    overflow: hidden;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0.4), 
rgba(255,255,255,0.4), rgba(0,0,255,0.4));
    background: -moz-linear-gradient(left, rgba(255,0,0,0.4), 
rgba(255,255,255,0.4), rgba(0,0,255,0.4));
    background: -ms-linear-gradient(left, rgba(255,0,0,0.4), 
rgba(255,255,255,0.4), rgba(0,0,255,0.4));
    background: -o-linear-gradient(left, rgba(255,0,0,0.4), 
rgba(255,255,255,0.4), rgba(0,0,255,0.4));
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
}
  #box {
    width: 102px;
    height: 386px;
    margin-left: 46px;
    margin-top: 6px;
    border: 2px solid blue;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
}
</style>

<div id=outer><div id=inner><div id=box></div></div></div>



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

Received on Monday, 15 August 2011 11:13:16 UTC