- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 18 May 2011 18:14:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv18921
Modified Files:
Overview.html Overview.src.html
Log Message:
Switch linear gradients over to using bearing angles.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.92
retrieving revision 1.93
diff -u -d -r1.92 -r1.93
--- Overview.html 16 May 2011 18:59:00 -0000 1.92
+++ Overview.html 18 May 2011 18:14:21 -0000 1.93
@@ -15,7 +15,7 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 May 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 May 2011</h2>
<dl>
<dt>Latest Version:
@@ -677,24 +677,7 @@
means that, for example, if you use a gradient in a ‘<code
class=property>background-image</code>’, the "box" will simply be
the size of the background sizing area. If you use a gradient in a
- list-style-image, the "box" will be a 1em square.
-
- <p class=issue>It has been suggested that several of the controls offered
- by gradients are unnecessary. Repeating gradients could potentially be
- done by hooking into ‘<code
- class=property>background-repeat</code>’, sizing and positioning
- radial gradients could be done by hooking into ‘<code
- class=property>background-size</code>’ and ‘<code
- class=property>background-position</code>’, etc.
-
- <p class=issue>Angles in gradients denote directions and match the behavior
- of polar coordinates, where 0deg is East, 90deg is North, and in general a
- larger angle corresponds to an angle further CCW. Other CSS properties
- that use angles to denote rotations use the convention that larger angles
- are further CW. It has been suggested that gradients be changed so that
- larger angles are more CW, and 0deg either remain East (matching a polar
- coordinate system with the Y axis flipped) or changed to North (matching
- bearings).</p>
+ list-style-image, the "box" will be a 1em square.</p>
<!-- ====================================================================== -->
<h3 id=linear-gradients><span class=secno>5.1. </span> Linear Gradients</h3>
@@ -727,14 +710,14 @@
<p>The <a href="#gradient-line"><i>gradient-line</i></a> may be specified
in two different ways. The first is by specifying the angle the <a
- href="#gradient-line"><i>gradient-line</i></a> should assume; this uses
- the standard algebraic notation for angles where 0deg points to the right,
- 90deg points up, and positive angles go counterclockwise. The
- starting-point and ending-point of the <a
- href="#gradient-line"><i>gradient-line</i></a> are determined by extending
- a line in both direction from the center of the box at the angle
- specified. In the direction of the angle, the ending-point is the point on
- the <a href="#gradient-line"><i>gradient-line</i></a> where a line drawn
+ href="#gradient-line"><i>gradient-line</i></a> should assume; for the
+ purposes of this property, 0deg points upwards, 90deg points toward the
+ right, and positive angles go clockwise. The starting-point and
+ ending-point of the <a href="#gradient-line"><i>gradient-line</i></a> are
+ determined by extending a line in both direction from the center of the
+ box at the angle specified. In the direction of the angle, the
+ ending-point is the point on the <a
+ href="#gradient-line"><i>gradient-line</i></a> where a line drawn
perpendicular to the <a href="#gradient-line"><i>gradient-line</i></a>
would intersect the corner of the box in that direction. The
starting-point is determined identically, except in the opposite direction
@@ -745,13 +728,13 @@
itself to extend from the specified side or corner to the opposite side or
corner in a straight line. To be precise, the gradient is converted to the
angle form described in the previous paragraph at used-value time. If a
- ‘<code class=css>left</code>’, ‘<code
- class=css>bottom</code>’, ‘<code
- class=css>right</code>’, or ‘<code class=css>top</code>’
- is given, the used value of the gradient is 0deg, 90deg, 180deg, or 270
- deg, respectively. If a corner is given, the used value of the gradient is
- the angle necessary to place the starting-point of the gradient in that
- corner of the box.
+ ‘<code class=css>top</code>’, ‘<code
+ class=css>right</code>’, ‘<code
+ class=css>bottom</code>’, or ‘<code
+ class=css>left</code>’ is given, the used value of the gradient is
+ 180deg, 270deg, 0deg, or 90deg, respectively. If a corner is given, the
+ used value of the gradient is the angle necessary to place the
+ starting-point of the gradient in that corner of the box.
<div class=example>
<div style="overflow: hidden"> <img alt="[An image showing a box with a
@@ -800,9 +783,8 @@
<pre><code>linear-gradient(yellow, blue);
linear-gradient(top, yellow, blue);
+linear-gradient(180deg, yellow, blue);
linear-gradient(bottom, blue, yellow);
-linear-gradient(-90deg, yellow, blue);
-linear-gradient(270deg, yellow, blue);
linear-gradient(top, yellow 0%, blue 100%);</code></pre>
<p><img alt="" src=linear1.png></p>
@@ -822,8 +804,7 @@
box is pure yellow, and the bottom-right of the box is pure blue. The
difference is in the angle that the gradient follows.</p>
- <pre><code>linear-gradient(-45deg, yellow, blue);
-linear-gradient(315deg, yellow, blue);</code></pre>
+ <pre><code>linear-gradient(135deg, yellow, blue);</code></pre>
<p><img alt="" src=linear3.png></p>
</div>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.96
retrieving revision 1.97
diff -u -d -r1.96 -r1.97
--- Overview.src.html 16 May 2011 18:59:00 -0000 1.96
+++ Overview.src.html 18 May 2011 18:14:21 -0000 1.97
@@ -446,19 +446,6 @@
area. If you use a gradient in a list-style-image, the "box" will be a 1em
square.</p>
- <p class=issue>It has been suggested that several of the controls offered by gradients are
- unnecessary. Repeating gradients could potentially be done by hooking into
- 'background-repeat', sizing and positioning radial gradients could be done by
- hooking into 'background-size' and 'background-position', etc.</p>
-
- <p class=issue>Angles in gradients denote directions and match the behavior of polar coordinates,
- where 0deg is East, 90deg is North, and in general a larger angle corresponds
- to an angle further CCW. Other CSS properties that use angles to denote rotations
- use the convention that larger angles are further CW. It has been suggested
- that gradients be changed so that larger angles are more CW, and 0deg either
- remain East (matching a polar coordinate system with the Y axis flipped) or
- changed to North (matching bearings).</p>
-
<!-- ====================================================================== -->
<h3 id='linear-gradients'>
@@ -491,8 +478,8 @@
<p>The <i>gradient-line</i> may be specified in two different ways. The
first is by specifying the angle the <i>gradient-line</i> should assume;
- this uses the standard algebraic notation for angles where 0deg points
- to the right, 90deg points up, and positive angles go counterclockwise.
+ for the purposes of this property, 0deg points upwards, 90deg points toward
+ the right, and positive angles go clockwise.
The starting-point and ending-point of the <i>gradient-line</i> are
determined by extending a line in both direction from the center of the
box at the angle specified. In the direction of the angle, the ending-point
@@ -506,8 +493,8 @@
itself to extend from the specified side or corner to the opposite side
or corner in a straight line. To be precise, the gradient is converted
to the angle form described in the previous paragraph at used-value time.
- If a ''left'', ''bottom'', ''right'', or ''top'' is given, the used value
- of the gradient is 0deg, 90deg, 180deg, or 270 deg, respectively. If
+ If a ''top'', ''right'', ''bottom'', or ''left'' is given, the used value
+ of the gradient is 180deg, 270deg, 0deg, or 90deg, respectively. If
a corner is given, the used value of the gradient is the angle necessary
to place the starting-point of the gradient in that corner of the box.</p>
@@ -548,9 +535,8 @@
<pre><code>linear-gradient(yellow, blue);
linear-gradient(top, yellow, blue);
+linear-gradient(180deg, yellow, blue);
linear-gradient(bottom, blue, yellow);
-linear-gradient(-90deg, yellow, blue);
-linear-gradient(270deg, yellow, blue);
linear-gradient(top, yellow 0%, blue 100%);</code></pre>
<p><img src="linear1.png" alt="" ></p>
@@ -570,8 +556,7 @@
box is pure yellow, and the bottom-right of the box is pure blue. The
difference is in the angle that the gradient follows.</p>
- <pre><code>linear-gradient(-45deg, yellow, blue);
-linear-gradient(315deg, yellow, blue);</code></pre>
+ <pre><code>linear-gradient(135deg, yellow, blue);</code></pre>
<p><img src="linear3.png" alt="" ></p>
</div>
Received on Wednesday, 18 May 2011 18:14:25 UTC