Linear gradients, Transforms and angles...

• From: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
• Date: Mon, 20 Sep 2010 10:36:36 +0200
• To: www-style list <www-style@w3.org>
• Message-ID: <4C971D14.3070708@disruptive-innovations.com>

Guys, I have a (light) problem with gradients and transformations.
An angle is not an angle...

- linear gradients' angles are counted counter-clockwise [1]

- rotations are counted clockwise [2]

Since gradients are not everywhere on the web YET, I hope we still can
change things here. So naive questions:

a) why that difference? Unintentional?
b) can we make both angles here mean the same thing and both
    rotate clockwise? Or both counter-clockwise?

I really don't care about clockwise or counter-clockwise. But I
would like an angle to be always meaning the same thing to web
authors. Think intuitivity. Think adding a -30deg linear gradient
to a 30deg rotated box to find again a horizontal linear gradient.
Makes sense.

I then suggest the following change in [1]:

-    * If the <angle> is greater than or equal to 0deg and less then
-      90deg, the starting-point of the gradient-line is the
-      bottom-left corner of the gradient-box.
-    * If the <angle> is greater than or equal to 90deg and less then
-      180deg, the starting-point of the gradient-line is the
-      bottom-right corner of the gradient-box.
-    * If the <angle> is greater than or equal to 180deg and less then
-      270deg, the starting-point of the gradient-line is the top-right
-      corner of the gradient-box.
-    * If the <angle> is greater than or equal to 270deg and less then
-      360deg, the starting-point of the gradient-line is the top-left
-      corner of the gradient-box.

+    * If the <angle> is greater than or equal to 0deg and less then
+      90deg, the starting-point of the gradient-line is the top-left
+      corner of the gradient-box.
+    * If the <angle> is greater than or equal to 90deg and less then
+      180deg, the starting-point of the gradient-line is the top-right
+      corner of the gradient-box.
+    * If the <angle> is greater than or equal to 180deg and less then
+      270deg, the starting-point of the gradient-line is the
+      bottom-right corner of the gradient-box.
+    * If the <angle> is greater than or equal to 270deg and less then
+      360deg, the starting-point of the gradient-line is the
+      bottom-left corner of the gradient-box.

[1] see prose and example VI in
     http://dev.w3.org/csswg/css3-images/#linear-gradients
[2] http://www.w3.org/TR/css3-2d-transforms/#transform-values

</Daniel>

Received on Monday, 20 September 2010 08:37:09 UTC