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

Re: [css3-images] Summary of recent gradient issues

From: Eli Morris-Heft <eli.morris.heft@gmail.com>
Date: Thu, 16 Jun 2011 08:58:28 -0500
Message-ID: <BANLkTinV-oeyRun6MHyYMvoS=3iOhLhemQ@mail.gmail.com>
To: Alan Gresley <alan@css-class.com>
Cc: www-style@w3.org
On Thu, Jun 16, 2011 at 07:55, Alan Gresley <alan@css-class.com> wrote:

> Maybe I misunderstood what you meant below.
>
>  | (Also in this syntax, the use of an _angle_ or
>  | keyword bit is _no longer optional_.)
>
>
> Better perhaps. I must really sit down and learn this stuff. I can only
> wing it so long :-)
>

Yes. To clarify, what I mean was that you can (in my syntax) no longer type
linear-gradient(black, white). You must specify either an angle or a
keyword. But that's easily changed and somewhat irrelevant to this
discussion.


>
>
>  FYI, a transition from top to right, right to bottom, bottom to left and
>>> left to top is inscribing the box. A transition from top right to bottom
>>> right, bottom right to bottom left, bottom left to top left and top left
>>> to
>>> top right is circumscribing the box.
>>>
>>> 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.
>>>
>>>
>> Is this different from the transition that has to occur when transitioning
>> from 0deg to 45deg on a square box?
>>
>
>
> Yes (see test below).


I should have been clearer. Is this any different from the transition that
has to occur when transitioning the linear-gradient from 0deg to 45deg on a
square box?

<!doctype html>

<style type="text/css">

#box {
 width: 200px;
 height: 200px;
 overflow:hidden;
 background: maroon;
 border: 10px solid #777;
 line-height:0.5;
 text-align: center;
}

#box div {
 background: white -webkit-linear-gradient(top, blue, rgba(0,255,255,0.5)
50%, green 100%);
 background: white -moz-linear-gradient(top, blue, rgba(0,255,255,0.5) 50%,
green 100%);
 width: 200px;
 height: 200px;
}

#box:hover div {
 background: white -webkit-linear-gradient(top right, blue,
rgba(0,255,255,0.5) 50%, green 100%);
 background: white -moz-linear-gradient(top right, blue, rgba(0,255,255,0.5)
50%, green 100%);
}

#box span {
 background: white;
 display: inline-block;
 height: 10px;
 width: 10px;
 border-radius: 5px;
}

</style>

<div id="box"><div><span></span></div></div>



> For me, I thought angle in rotation for linear-gradient was just about
> changing the angle of the start and end points in respect to an x and/or y
> axis.
>
> Are you requesting that implementations should increase the length between
> the start and end points as well as adjust background-position, so an author
> thinks that they have transitioned from top to top right. Even doing this
> causes the white square in the below test to traverse an arc.
>

Changing the angle in a gradient does change the length[1] (particularly
Example VII). Though as I noted above I think we misunderstood each other.
I'd request no such magic when transforming the box itself.

[1] http://www.w3.org/TR/css3-images/#linear-gradients
Received on Thursday, 16 June 2011 13:59:24 GMT

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