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

On 17/08/2011 4:27 AM, Brian Manthos wrote:
> Concur with Brad.
>
> Regarding circumscribing...
>
> The old (WD) and new (ED) rendering of corner-to-corner *only*
> changes what angle is chosen.  The interpolation of angles is
> unchanged.


Well that interesting to know. I just did what Tab told me to do and 
that was to read the "Gradient Magic" thread.

   (please see the attached image and the one that has bottom right magic)

http://lists.w3.org/Archives/Public/www-style/2011Jul/0265.html


Then Brad was referring to a newer "magic corners" but was this really 
newer "keywords" referencing old "magic corners"? Is this correct?


> On that note, the path that an endpoint takes as you
> interpolate across angles is *not* circular for at least non-square
> boxes.  It might be a pair of partial circles or ellipses (like two
> olympic rings without the middle part), but it's definitely not a
> single circle.


On a side note, the single circle approach (circumscribing a box) does 
allow one to create solid block triangles on a box of varying widths and 
heights and have the non right-angle points always aligned to opposite 
corners (show with an 'x') regardless of if the box changed shape.

------x
|RA  /|
|   / |
|  /  |
| /   |
|/    |
x-----


> Attached is a crude rendering; observe the purple line approximations
> of the path that the end point takes during interpolation of the
> angle.
>
> -Brian


OK Brian, I have seen both of your examples and they are hard to follow. 
Below I have some code (remember to check it Brian). Is this how a 
transition will work from side to corner on a box of equal height and width?

<!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;
   -webkit-transition: all 2s linear;
   -moz-transition: all 2s linear;
   -ms-transition: all 2s linear;

}

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

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

</style>

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




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

Received on Thursday, 18 August 2011 02:28:57 UTC