W3C home > Mailing lists > Public > public-css-commits@w3.org > November 2011

csswg/css3-images Overview.html,1.182,1.183 Overview.src.html,1.189,1.190

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 07 Nov 2011 23:43:23 +0000
To: public-css-commits@w3.org
Message-Id: <E1RNYqZ-0007Pg-Db@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv28482

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Add more subheadings. Move color stops explanation above degenerate shapes because authors don't care about the latter so it should be later in the section.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.182
retrieving revision 1.183
diff -u -d -r1.182 -r1.183
--- Overview.html	7 Nov 2011 23:38:28 -0000	1.182
+++ Overview.html	7 Nov 2011 23:43:21 -0000	1.183
@@ -942,6 +942,35 @@
       Negative values are never allowed.
     </dl>
 
+    <h4 class=no-toc id=radial-color-stops><span class=secno>5.2.2. </span>
+     Placing Color Stops</h4>
+
+    <p>Color-stops are placed on a <dfn id=gradient-ray>gradient-ray</dfn>,
+     similar to the <a href="#gradient-line"><i>gradient-line</i></a> of
+     linear gradients. The <a href="#gradient-ray"><i>gradient-ray</i></a> is
+     anchored at the center of the gradient and extends toward the right. The
+     0% location is at the start of the <a
+     href="#gradient-ray"><i>gradient-ray</i></a>, and the 100% location is
+     on the point where the <a href="#gradient-ray"><i>gradient-ray</i></a>
+     intersects the <a href="#ending-shape"><i>ending-shape</i></a>. Negative
+     locations can be specified; though negative locations are never directly
+     consulted for rendering, they can affect the color of non-negative
+     locations on the <a href="#gradient-ray"><i>gradient-ray</i></a> through
+     interpolation. For example, &lsquo;<code class=css>radial-gradient(red
+     -50px, yellow 100px)</code>&rsquo; produces an elliptical gradient that
+     starts with a reddish-orange color in the center (specifically, #f50)
+     and transitions to yellow. Locations greater than 100% simply specify a
+     location a correspondingly greater distance from the center of the
+     gradient.</p>
+
+    <p>When drawing the concentric ellipses of the gradient, the color of
+     each ellipse is the color of the <a
+     href="#gradient-ray"><i>gradient-ray</i></a> at the point where the
+     ellipse intersects the ray.</p>
+
+    <h4 class=no-toc id=degenerate-radials><span class=secno>5.2.3. </span>
+     Degenerate Radial Gradients</h4>
+
     <p>Some combinations of position, size, and shape will produce a circle
      or ellipse with a radius of 0. This will occur, for example, if the
      center is on a box edge and &lsquo;<code
@@ -972,32 +1001,9 @@
       equal to the color of the last color-stop, or equal to the average
       color of the gradient if it's repeating.</span>
     </dl>
-
-    <p>Color-stops are placed on a <dfn id=gradient-ray>gradient-ray</dfn>,
-     similar to the <a href="#gradient-line"><i>gradient-line</i></a> of
-     linear gradients. The <a href="#gradient-ray"><i>gradient-ray</i></a> is
-     anchored at the center of the gradient and extends toward the right. The
-     0% location is at the start of the <a
-     href="#gradient-ray"><i>gradient-ray</i></a>, and the 100% location is
-     on the point where the <a href="#gradient-ray"><i>gradient-ray</i></a>
-     intersects the <a href="#ending-shape"><i>ending-shape</i></a>. Negative
-     locations can be specified; though negative locations are never directly
-     consulted for rendering, they can affect the color of non-negative
-     locations on the <a href="#gradient-ray"><i>gradient-ray</i></a> through
-     interpolation. For example, &lsquo;<code class=css>radial-gradient(red
-     -50px, yellow 100px)</code>&rsquo; produces an elliptical gradient that
-     starts with a reddish-orange color in the center (specifically, #f50)
-     and transitions to yellow. Locations greater than 100% simply specify a
-     location a correspondingly greater distance from the center of the
-     gradient.</p>
-
-    <p>When drawing the concentric ellipses of the gradient, the color of
-     each ellipse is the color of the <a
-     href="#gradient-ray"><i>gradient-ray</i></a> at the point where the
-     ellipse intersects the ray.</p>
     <!-- ====================================================================== -->
     
-    <h4 class=no-toc id=radial-gradient-examples><span class=secno>5.2.2.
+    <h4 class=no-toc id=radial-gradient-examples><span class=secno>5.2.4.
      </span> Radial Gradient Examples</h4>
 
     <p>All of the following examples are applied to a box that is 200px wide
@@ -2247,7 +2253,7 @@
       title=gradient-line><strong>5.1.1.</strong></a>
 
      <li>gradient-ray, <a href="#gradient-ray"
-      title=gradient-ray><strong>5.2.1.</strong></a>
+      title=gradient-ray><strong>5.2.2.</strong></a>
 
      <li>&lt;image>, <a href="#ltimage"
       title="&lt;image>"><strong>4.</strong></a>

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.189
retrieving revision 1.190
diff -u -d -r1.189 -r1.190
--- Overview.src.html	7 Nov 2011 23:38:28 -0000	1.189
+++ Overview.src.html	7 Nov 2011 23:43:21 -0000	1.190
@@ -603,6 +603,16 @@
 		</dd>
 	</dl>
 
+<h4 class="no-toc" id="radial-color-stops">
+Placing Color Stops</h4>
+
+	<p>Color-stops are placed on a <dfn>gradient-ray</dfn>, similar to the <i>gradient-line</i> of linear gradients.  The <i>gradient-ray</i> is anchored at the center of the gradient and extends toward the right.  The 0% location is at the start of the <i>gradient-ray</i>, and the 100% location is on the point where the <i>gradient-ray</i> intersects the <i>ending-shape</i>.  Negative locations can be specified; though negative locations are never directly consulted for rendering, they can affect the color of non-negative locations on the <i>gradient-ray</i> through interpolation.  For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient that starts with a reddish-orange color in the center (specifically, #f50) and transitions to yellow.  Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient.</p>
+
+	<p>When drawing the concentric ellipses of the gradient, the color of each ellipse is the color of the <i>gradient-ray</i> at the point where the ellipse intersects the ray.</p>
+
+<h4 class="no-toc" id="degenerate-radials">
+Degenerate Radial Gradients</h4>
+
 	<p>Some combinations of position, size, and shape will produce a circle
 	or ellipse with a radius of 0. This will occur, for example, if the
 	center is on a box edge and ''closest-side'' or ''closest-corner'' is
@@ -618,10 +628,6 @@
 		<dd>Render as if the <i>ending-shape</i> was an ellipse whose width was an arbitrary very large number and whose height was an arbitrary very small number greater than zero.  <span class='note'>This will make the gradient look like a solid-color image equal to the color of the last color-stop, or equal to the average color of the gradient if it's repeating.</span></dd>
 	</dl>
 
-	<p>Color-stops are placed on a <dfn>gradient-ray</dfn>, similar to the <i>gradient-line</i> of linear gradients.  The <i>gradient-ray</i> is anchored at the center of the gradient and extends toward the right.  The 0% location is at the start of the <i>gradient-ray</i>, and the 100% location is on the point where the <i>gradient-ray</i> intersects the <i>ending-shape</i>.  Negative locations can be specified; though negative locations are never directly consulted for rendering, they can affect the color of non-negative locations on the <i>gradient-ray</i> through interpolation.  For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient that starts with a reddish-orange color in the center (specifically, #f50) and transitions to yellow.  Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient.</p>
-
-	<p>When drawing the concentric ellipses of the gradient, the color of each ellipse is the color of the <i>gradient-ray</i> at the point where the ellipse intersects the ray.</p>
-
 <!-- ====================================================================== -->
 	
 <h4 class='no-toc' id='radial-gradient-examples'>
Received on Monday, 7 November 2011 23:43:29 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 7 November 2011 23:43:29 GMT