- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 02 Feb 2012 12:07:47 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images In directory hutz:/tmp/cvs-serv2632 Modified Files: Overview.src.html Log Message: Editorial fixups suggested by Leif. Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-images/Overview.src.html,v retrieving revision 1.278 retrieving revision 1.279 diff -u -d -r1.278 -r1.279 --- Overview.src.html 1 Feb 2012 18:37:57 -0000 1.278 +++ Overview.src.html 2 Feb 2012 12:07:45 -0000 1.279 @@ -501,10 +501,10 @@ <h3 id='linear-gradients'> Linear Gradients: the ''linear-gradient()'' notation</h3> - <p>A linear gradient is created by specifying a gradient-line and then several + <p>A linear gradient is created by specifying a gradient line and then several colors placed along that line. The image is constructed by creating an - infinite canvas and painting it with lines perpendicular to the gradient-line, - with the color of the painted line being the color of the gradient-line + infinite canvas and painting it with lines perpendicular to the gradient line, + with the color of the painted line being the color of the gradient line where the two intersect. This produces a smooth fade from each color to the next, progressing in the specified direction.</p> @@ -521,23 +521,23 @@ <dfn id='side-or-corner'><side-or-corner></dfn> = [left | right] || [top | bottom]</code></pre> - <p>The first argument to the function specifies the <dfn>gradient-line</dfn>, + <p>The first argument to the function specifies the <dfn>gradient line</dfn>, which gives the gradient a direction and determines how color-stops are positioned. It may be omitted; if so, it defaults to "to bottom".</p> - <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; + <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; for the purposes of this argument, 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 + The starting-point and ending-point of the <i>gradient line</i> are determined by extending a line in both directions from the center of the <i>gradient box</i> at the angle specified. In the direction of the angle, the ending-point - is the point on the <i>gradient-line</i> where a line drawn perpendicular - to the <i>gradient-line</i> would intersect the corner of the <i>gradient box</i> in that + is the point on the <i>gradient line</i> where a line drawn perpendicular + to the <i>gradient line</i> would intersect the corner of the <i>gradient box</i> in that direction. The starting-point is determined identically, except in the opposite direction of the angle.</p> - <p>Alternately, the direction may be specified with keywords that denote the direction. If the argument is ''to top'', ''to right'', ''to bottom'', or ''to left'', the gradient must be rendered identically to ''0deg'', ''90deg'', ''180deg'', or ''270deg'', respectively. If the argument specifies a corner to angle towards, the gradient must be rendered identically to an angle-based gradient with an angle chosen such that the endpoint of the gradient is in the same quadrant as the indicated corner, and a line drawn perpendicular to the gradient-line through the center of the <i>gradient box</i> intersects the two neighboring corners.</p> + <p>Alternately, the direction may be specified with keywords that denote the direction. If the argument is ''to top'', ''to right'', ''to bottom'', or ''to left'', the gradient must be rendered identically to ''0deg'', ''90deg'', ''180deg'', or ''270deg'', respectively. If the argument specifies a corner to angle towards, the gradient must be rendered identically to an angle-based gradient with an angle chosen such that the endpoint of the gradient is in the same quadrant as the indicated corner, and a line drawn perpendicular to the gradient line through the center of the <i>gradient box</i> intersects the two neighboring corners.</p> <p class='note'>It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode.</p> @@ -545,10 +545,10 @@ <div class=example> <div style="overflow: hidden"> - <img style="float: right; margin-left: 1em;" src='gradient-diagram.png' alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient-line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient-line are indicated by the intersection of the gradient-line with two additional lines that pass through the bottom-left and top-right corners of the box.]"> + <img style="float: right; margin-left: 1em;" src='gradient-diagram.png' alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]"> <p>This example illustrates visually how to calculate the - <i>gradient-line</i> from the rules above. This shows the starting - and ending-point of the <i>gradient-line</i>, along with the actual + <i>gradient line</i> from the rules above. This shows the starting + and ending-point of the <i>gradient line</i>, along with the actual gradient, produced by an element with ''background: linear-gradient(45deg, white, black);''.</p> <p>Notice how, though the starting-point and ending-point are outside @@ -560,8 +560,8 @@ </div> <p>The gradient's color stops are typically placed between the starting-point - and ending-point on the <i>gradient-line</i>, but this isn't required - the - <i>gradient-line</i> extends infinitely in both directions. The starting-point + and ending-point on the <i>gradient line</i>, but this isn't required - the + <i>gradient line</i> extends infinitely in both directions. The starting-point and ending-point are merely arbitrary location markers - the starting-point defines where 0%, 0px, etc are located when specifying color-stops, and the ending-point defines where 100% is located. Color-stops are allowed @@ -588,7 +588,7 @@ </div> <div class=example> - <p>This demonstrates the use of an angle in the gradient. Note that, though the angle is not exactly the same as the angle between the corners, the <i>gradient-line</i> is still sized so as to make the gradient yellow exactly at the upper-left corner, and blue exactly at the lower-right corner.</p> + <p>This demonstrates the use of an angle in the gradient. Note that, though the angle is not exactly the same as the angle between the corners, the <i>gradient line</i> is still sized so as to make the gradient yellow exactly at the upper-left corner, and blue exactly at the lower-right corner.</p> <pre><code>linear-gradient(135deg, yellow, blue); linear-gradient(-45deg, blue, yellow);</code></pre> @@ -745,9 +745,9 @@ <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>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> + <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> @@ -880,13 +880,13 @@ <pre class=prod><code><dfn><color-stop></dfn> = <color> [ <percentage> | <length> ]?</code></pre> - <p>Color-stops are points placed along the line defined by the <i>gradient-line</i> + <p>Color-stops are points placed along the line defined by the <i>gradient line</i> at the beginning of the rule. Color-stops must be specified in order. - Percentages refer to the length of the gradient-line, with 0% being at the + Percentages refer to the length of the gradient line, with 0% being at the starting point and 100% being at the ending point. Lengths are measured from the starting-point in the direction of the ending-point. Color-stops are usually placed between the starting-point and ending-point, but that's - not required; the gradient-line extends infinitely in both directions, and + not required; the gradient line extends infinitely in both directions, and a color-stop can be placed at any position on the line.</p> <p>At each color-stop, the line is the color of the color-stop. Between @@ -1270,13 +1270,13 @@ the content box.</p> <div class="figure"> - <p><img src="img_scale.png" style="border: thin solid black;" alt=""></p> + <img src="img_scale.png" style="border: thin solid black;" alt> <p class="caption">An example showing how four of the values of 'object-fit' cause the replaced element (blue figure) to be scaled to fit - its height/width box (shownwith a green background), using the initial - value for 'object-position'. The fifth value, '<span class='css'>scale-down</span>, - in this case looks identical to '<span class='css'>contain</span>.</p> + its height/width box (shown with a green background), using the initial + value for 'object-position'. The fifth value, ''scale-down'', + in this case looks identical to ''contain''.</p> </div> <p class='issue'>Find some good use-cases and make examples out of them.</p>
Received on Thursday, 2 February 2012 12:07:53 UTC