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

Neither of those variations is correct. Since "Magic Corners" merely creates a certain angle and then acts like a 'deg' from there on, the transitions should be equivalent to this (if using current WebKit nightly):

<style>
div {
background: -webkit-linear-gradient(-15deg, rgba(255, 0, 0, 0.4), rgba(255, 255, 255, 0.4), rgba(0, 0, 255, 0.4));
height:386px;
width:102px;
-webkit-transition: all 2s;

}
div:hover {
background: -webkit-linear-gradient(-90deg, rgba(255, 0, 0, 0.4), rgba(255, 255, 255, 0.4), rgba(0, 0, 255, 0.4));
}
</style>
<div> </div>

Webkit doesn't currently transition the gradient, but if it did, all the in-betweens should act exactly as if they had a 'deg' notation, and therefor the 0% and 100% color-stops should always intersect at least one corner. In your examples they do not.


On Aug 15, 2011, at 10:29 PM, Alan Gresley wrote:

> On 16/08/2011 11:51 AM, Brian Manthos wrote:
>> Alan Gresley:
>>> The code simulates the newer "magic corners" gradient.
>>> 
>>> The issue I have is when these are transitioned or animated. If
>>> the transitioned is from 'to bottom right' (as in the code) to 'to
>>> bottom', the length between the endpoints (red and blue) go from
>>> roughly 200px to 400px. Also instead of the rectangle being
>>> circumscribed by the gradient path (or direction) it is inscribed
>>> by the gradient path. I would like the ability to control if a
>>> gradient path is circumscribing or inscribing a box in a transition
>>> or animation.
>> 
>> An example (maybe just a revisit of a previous one) would help me
>> (and maybe others) understand the use case.
> 
> 
> I have now uploaded an example to simulate the newer "magic corners".
> 
> http://css-class.com/test/css/3/gradients/corners-circumscribed.htm
> 
> 
>> The example I have in mind is something where you show 2 rows of 5
>> boxes.  The first row contains the transition you expect with current
>> spec.  The second row contains the transition you would like.  The
>> 1st - 5th columns are { start, 25%, 50%, 75%, end }.  Maybe fill the
>> boxes using SVG background-image?
> 
> 
> This is a simulated transition from corner to side.
> 
> http://css-class.com/test/css/3/gradients/corners-circumscribed2.htm
> 
> 
> I could not change the values of the gradients since they are not transitional as yet so the red and blue extreme points are slightly outside the rectangle.
> 
> I don't mine this sort of transition but I would also like to be able to do a transition where the gradient path is always circumscribing a box and the distance between the red and blue extremes of the gradient remains constant. This can only happen if the initial newer "magic corners" gradient can also extends to the edge of the circumscribing circle. Here is a example.
> 
> http://css-class.com/test/css/3/gradients/corners-circumscribed3.htm
> 
> 
> For this to happen, there needs to be a new keyword for circumscribed gradients (that if the current behavior remains the default behavior). I happy for this to appear in css4-images. The reason why I believe that such gradient should be allowed is that you can use linear and radial gradient together and currently radial gradients only circumscribe a box.
> 
> 
> 
> -- 
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/

Received on Tuesday, 16 August 2011 15:16:59 UTC