Re: [css3-images] Changing the angles in gradients

On 18/05/2011 5:57 AM, Tab Atkins Jr. wrote:

> So, we have three choices:
>
> A) Keep the angles as they are, with 0deg=East and 90deg=North
> B) Switch to screen-coord polar, with 0deg=East and 90deg=South
> C) Switch to bearing angles, with 0deg=North and 90deg=East


I prefer D (missing from the above) to make linear-gradient consistent 
with 2D rotation which also uses degrees. This means that the initial 
value for linear-gradient (which can be omitted) would be 0deg but it 
also means that the angle of the linear-gradient is perpendicular to the 
direction of the gradient instead of being parallel as is currently is 
(effectively we are flipping the y-axis when a linear-gradient is at 
0deg). Take this example which would be the default or initial value.

<!doctype html>

<style type="text/css">
div {
   height: 150px;
   width: 150px;
   border: 2px solid blue;
   background: -webkit-linear-gradient(0deg, pink, orange 75px, blue 
75px, lime);
   background: -moz-linear-gradient(0deg, pink, orange 75px, blue 75px, 
lime);
   background: -ms-linear-gradient(0deg, pink, orange 75px, blue 75px, 
lime);
}
</style>

<div></div>


Lets' say we rotate an element by 30 degrees (pointing at 1 o'clock) and 
we want that strong contrast in the gradient to point at 2 o'clock. The 
CSS we would use is this.


div {
   transform: rotate(30deg);
   background: linear-gradient(30deg, pink, orange 75px, blue 75px, lime);
}


If I wanted to change the rotation of the element but have the strong 
contrast still inline with 2 o'clock, I would change the values so that 
when both values of degrees are added together, they still equals 60 
degrees.


div {
   transform: rotate(45deg);
   background: linear-gradient(15deg, pink, orange 75px, blue 75px, lime);
}


This is just like 2D rotation if you are rotating a child element within 
a rotated parent element.


Now Lets' reverse it and say that we rotate an element by 60 degrees 
(pointing at 2 o'clock) and we want that strong contrast in the gradient 
to point at 1 o'clock. The CSS we would use is this.


div {
   transform: rotate(60deg);
   background: linear-gradient(-30deg, pink, orange 75px, blue 75px, lime);
}


If I wanted to change the rotation of the element but have the strong 
contrast still inline with 1 o'clock, I would change the values so that 
when both values of degrees are added together, they still equals 30 
degrees.


div {
   transform: rotate(45deg);
   background: linear-gradient(-15deg, pink, orange 75px, blue 75px, lime);
}


Again this is how nested elements behave with 2D rotation.



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

Received on Wednesday, 18 May 2011 14:30:31 UTC