- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 07 Nov 2011 23:43:23 +0000
- To: public-css-commits@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, ‘<code class=css>radial-gradient(red
+ -50px, yellow 100px)</code>’ 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 ‘<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, ‘<code class=css>radial-gradient(red
- -50px, yellow 100px)</code>’ 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><image>, <a href="#ltimage"
title="<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 UTC