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

On 16/06/2011 9:38 PM, Eli Morris-Heft wrote:
> On Thu, Jun 16, 2011 at 00:25, Alan Gresley<>  wrote:
>> So in other words, if I had a box of width: 200px and height: 100px, I can
>> no have a linear-gradient (running from start to end) at 45 arc degrees from
>> either the x or y axises.
> Don't see why you couldn't.

Maybe I misunderstood what you meant below.

   | (Also in this syntax, the use of an _angle_ or
   | keyword bit is _no longer optional_.)

> You can still specify angles in the syntax I
> suggested. Though looking back, I do see that I accidentally missed a
> grouping; sorry if that was the source of the confusion. Let me fix that:
> <linear-gradient>  = linear-gradient(
> [
>      [
>          <angle>
>          |
>          [ top | bottom | left | right [to [ top | bottom | left | right] ]?
> ]
>      ],<color-stop>[,<color-stop>]+
> );

Better perhaps. I must really sit down and learn this stuff. I can only 
wing it so long :-)

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

> (Or 0deg to 30deg on a box with a
> 1:sqrt(3) ratio for the sides?) Not a trivial matter either way, but it is
> not adding any calculation that doesn't have to be done in unrelated
> circumstances.

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 

(tested in Chrome but should work in WebKit nightly or Aurora)

<!doctype html>

<style type="text/css">

#box {
   width: 200px;
   height: 200px;
   background: maroon;
   border: 10px solid #777;
   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;
   -webkit-transition: all 2s linear;
   -moz-transition: all 2s linear;

#box:hover div {
   width: 280px;
   height: 280px;
   margin-left: -40px;
   margin-top: -40px;
   -webkit-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);

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


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

Alan Gresley

Received on Thursday, 16 June 2011 12:56:36 UTC