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

On 19/08/2011 3:08 AM, Brian Manthos wrote:
> Alan Gresley:
>> OK, where on the inner box is the beginning of the gradient in the
>> code below? I would say it's where the line crosses a circumscribed
>> circle around the rectangle (the same distance as the distance from
>> the center of the rectangle to each corner).
>
> It's exactly like depicted here:
> http://dev.w3.org/csswg/css3-images/#linear-gradients


Following now.

So in the below code (check in Gecko and select 1, 2, 3, 4 and 5 in 
sequence), a transition from 'to top right' to 'to bottom right' on an 
element that also has a transition of width and height would be visually 
90 degrees (a blue vertical block from center to right), midway through 
a transition.


   ----------
        BBBBB
        BBBBB
        BBBBB
        BBBBB
   ----------


The later half of the transition encompass an transition from visual 90 
degrees to visual 105 degrees which is only 15 degrees difference. I 
pondering if the gradient path or direction (the black line showing the 
end points) would quickly slows, stalls or visually moves anti-clockwise 
during this later half of the transition.

For me, "magic corner" of old have been replaced with "esoteric 
corners". I'm just wondering if that is a wise default behavior.


<!doctype html>

<style type="text/css">

#line {
   height: 2px;
   width: 332px;
   margin-top: -1px;
   margin-left: -166px;
   background: black;
   position: absolute;
   top: 50%;
   left:50%;
   -moz-transform: rotate(-75deg);
   -webkit-transition: all 1s;
   -moz-transition: all 1s;
   -ms-transition: all 1s;
   -o-transition: all 1s;
   transition: all 1s;
}

#wrap {
   height: 600px;
   width: 600px;
   position: relative;
   background: gray;
   margin: 20px auto;
}

#box {
   background-image: -moz-linear-gradient(75deg, transparent 50%, blue 
50%, blue 95%, pink);
   background-color: white;
   height: 160px;
   width: 600px;
   position: absolute;
   left:50%;
   top: 50%;
   margin-left: -300px;
   margin-top: -80px;
   -moz-transition: all 1s;
}

#element {text-align: center }

</style>

<script>

function turn1()
{
document.getElementById('box').style.backgroundImage="-moz-linear-gradient(75deg, 
transparent 50%, blue 50%, blue 95%, pink)";
document.getElementById('box').style.height="160px";
document.getElementById('box').style.width="600px";
document.getElementById('box').style.marginTop="-80px";
document.getElementById('box').style.marginLeft="-300px";
document.getElementById('line').style.MozTransform="rotate(-75deg)";
document.getElementById('line').style.width="332px";
document.getElementById('line').style.marginLeft="-166px";
}
function turn2()
{
document.getElementById('box').style.backgroundImage="-moz-linear-gradient(60deg, 
transparent 50%, blue 50%, blue 95%, pink)";
document.getElementById('box').style.height="270px";
document.getElementById('box').style.width="490px";
document.getElementById('box').style.marginTop="-135px";
document.getElementById('box').style.marginLeft="-245px";
document.getElementById('line').style.MozTransform="rotate(-60deg)";
document.getElementById('line').style.width="484px";
document.getElementById('line').style.marginLeft="-242px";
}
function turn3()
{
document.getElementById('box').style.backgroundImage="-moz-linear-gradient(45deg, 
transparent 50%, blue 50%, blue 95%, pink)";
document.getElementById('box').style.height="380px";
document.getElementById('box').style.width="380px";
document.getElementById('box').style.marginTop="-190px";
document.getElementById('box').style.marginLeft="-190px";
document.getElementById('line').style.MozTransform="rotate(-45deg)";
document.getElementById('line').style.width="536px";
document.getElementById('line').style.marginLeft="-268px";
}
function turn4()
{
document.getElementById('box').style.backgroundImage="-moz-linear-gradient(30deg, 
transparent 50%, blue 50%, blue 95%, pink)";
document.getElementById('box').style.height="490px";
document.getElementById('box').style.width="270px";
document.getElementById('box').style.marginTop="-245px";
document.getElementById('box').style.marginLeft="-135px";
document.getElementById('line').style.MozTransform="rotate(-30deg)";
document.getElementById('line').style.width="484px";
document.getElementById('line').style.marginLeft="-242px";
}
function turn5()
{
document.getElementById('box').style.backgroundImage="-moz-linear-gradient(15deg, 
transparent 50%, blue 50%, blue 95%, pink)";
document.getElementById('box').style.height="600px";
document.getElementById('box').style.width="160px";
document.getElementById('box').style.marginTop="-300px";
document.getElementById('box').style.marginLeft="-80px";
document.getElementById('line').style.MozTransform="rotate(-15deg)";
document.getElementById('line').style.width="332px";
document.getElementById('line').style.marginLeft="-166px";
}

</script>

<div id="element">
   <input id="first" type="button" onclick="turn1()" value="P 1">
   <input id="second" type="button" onclick="turn2()" value="P 2">
   <input id="third" type="button" onclick="turn3()" value="P 3">
   <input id="forth" type="button" onclick="turn4()" value="P 4">
   <input id="forth" type="button" onclick="turn5()" value="P 5">
</div>

<div id="wrap">
   <div id="box"><div id="line"></div></div></div>
</div>



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

Received on Sunday, 21 August 2011 16:15:56 UTC