Webkit has extended their css3 gradient options with -webkit-linear-gradient which uses the standard “gradient rotation” value found in Mozilla’s -moz-linear-gradient but unfortunately this is only supported in Safari 5.1+ and Chrome 10+. Until Safari 5.1 becomes the norm any programmatic references to gradient rotation have to be converted from the typical 360 based rotation value to Webkit’s powerful but awkward (powerfully akward?) -webkit-gradient point syntax where your linear gradient’s start and end values have to be defined as X,Y value pairs that explicitly state at what point the gradient starts and ends.
For a linear right-to-left gradient you could define percentage points like so:
-webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0, rgba(80,80,80,1)), color-stop(1, rgba(80,80,80,0.5)));
Which reads “start the gradient at wherever “0% width and 50% height” is and end the gradient at “100% width and 50% height”.
This is easy enough to calculate by hand but if you have a project with a ton of regular gradient rotation styles already defined you’re going to need to convert via javascript and some Trigonometry which is the situation I was in. A bit of googling turned up no clear cut method of converting a gradient rotation value to a pair of percentage based X and Y values so here is what I came up with. First the code:
function pointOnCircle(radius, angleInDegrees, origin){
var x = (radius * Math.cos(angleInDegrees * Math.PI / 180)) + origin.x;
var y = (radius * Math.sin(angleInDegrees * Math.PI / 180)) + origin.y;
return {x:x, y:y};
}
//webkit has updated syntax from -webkit-gradient to a much more sensible -webkit-linear-gradient with angle but
//this is only supported in Safari 5.1+ nd Chrome 10+ so we’ll have to do the math to convert gradient rotation to
//start and end points on a circle
var gradientRotation = 0 – (node.gradientRotation%360);
var centerPoint = {x:0, y:0};
var rotatedStartPoint = KickUtils.pointOnCircle(50, 180-gradientRotation, centerPoint);
var rotatedEndPoint = KickUtils.pointOnCircle(50, 360-gradientRotation, centerPoint);
rotatedStartPoint.x = Math.round(rotatedStartPoint.x+50);
rotatedStartPoint.y = Math.round(rotatedStartPoint.y+50);
rotatedEndPoint.x = Math.round(rotatedEndPoint.x+50);
rotatedEndPoint.y = Math.round(rotatedEndPoint.y+50);
return ‘background-image: -webkit-gradient(linear, ‘ + rotatedStartPoint.x+’% ‘+rotatedStartPoint.y+’%, ‘+rotatedEndPoint.x+”% “+rotatedEndPoint.y+’%, color-stop(0, …
Since a numeric gradient rotation value defines a gradient that passes through the center of a circle, you can use the trig function above to calculate the 2 points that line intersects the radius of the circle. Defining the center of the circle at 50, 50 you can get values returned in the -50 to +50 range. Add 50 to that value and tack on a % and voila your 2 percentage based points start and end values are defined.
