- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 04 Jan 2012 19:35:39 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv16977
Modified Files:
Overview.html Overview.src.html
Log Message:
Editorial fixups
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.257
retrieving revision 1.258
diff -u -d -r1.257 -r1.258
--- Overview.html 13 Dec 2011 02:00:24 -0000 1.257
+++ Overview.html 4 Jan 2012 19:35:37 -0000 1.258
@@ -5,7 +5,7 @@
content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>CSS Image Values and Replaced Content Module Level 3</title>
- <link href="../css-module/default.css" rel=stylesheet type="text/css">
+ <link href="../default.css" rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
@@ -16,15 +16,14 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 December
- 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 January 2012</h2>
<dl>
<dt>This Version:
<dd><a
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
- <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111213/">http://www.w3.org/TR/2011/WD-css3-images-20111213/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120104/">http://www.w3.org/TR/2012/WD-css3-images-20120104/</a>-->
<dt>Latest Version:
@@ -52,6 +51,19 @@
<dd><a
href="http://www.w3.org/TR/2009/WD-css3-images-20090723/">http://www.w3.org/TR/2009/WD-css3-images-20090723/</a>
+ <dt>Issues List:
+
+ <dd><a
+ href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a>
+
+
+ <dt>Discussion List:
+
+ <dd><a
+ href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
+ with subject line “<kbd>[css3-images] <var>… message topic
+ …</var></kbd>”
+
<dt>Editors:
<dd class=vcard> <a class="url fn"
@@ -65,7 +77,7 @@
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
- rel=license>Copyright</a> © 2011 <a
+ rel=license>Copyright</a> © 2012 <a
href="http://www.w3.org/"><acronym
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><acronym
@@ -171,27 +183,31 @@
<ul class=toc>
<li><a href="#url"><span class=secno>3.1. </span> Image References and
Image Slices: the ‘<code class=css>url()</code>’
- function</a>
+ notation</a>
<li><a href="#image-notation"><span class=secno>3.2. </span> Image
Fallbacks and Annotations: the ‘<code
- class=css>image()</code>’ function</a>
+ class=css>image()</code>’ notation</a>
<li><a href="#element-reference"><span class=secno>3.3. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
- function</a>
+ notation</a>
</ul>
<li><a href="#gradients"><span class=secno>4. </span> Gradients</a>
<ul class=toc>
<li><a href="#linear-gradients"><span class=secno>4.1. </span> Linear
- Gradients</a>
+ Gradients: the ‘<code class=css>linear-gradient()</code>’
+ notation</a>
<li><a href="#radial-gradients"><span class=secno>4.2. </span> Radial
- Gradients</a>
+ Gradients: the ‘<code class=css>radial-gradient()</code>’
+ notation</a>
<li><a href="#repeating-gradients"><span class=secno>4.3. </span>
- Repeating Gradients</a>
+ Repeating Gradients: the ‘<code
+ class=css>repeating-linear-gradient()</code>’ and ‘<code
+ class=css>repeating-radial-gradient()</code>’ notations</a>
<li><a href="#color-stop-syntax"><span class=secno>4.4. </span> Gradient
Color-Stops</a>
@@ -363,7 +379,10 @@
<h2 id=image><span class=secno>3. </span> Image Values: the <image> type</h2>
- <p>The <image> value type denotes a 2D image. It is defined as
+ <p>The <image> value type denotes a 2D image. It represents either a <a
+ href="#url">url reference</a>, <a href="#image-notation">image
+ notation</a>, <a href="#element-reference">element reference</a>, or <a
+ href="#gradients">gradient notation</a>. Syntactically it is defined as
<pre class=prod><dfn id=ltimage><image></dfn> = <i><url></i> | <a
href="#ltimage-list"><i><image-list></i></a> | <a
@@ -379,7 +398,7 @@
<h3 id=url><span class=secno>3.1. </span> Image References and Image
- Slices: the ‘<code class=css>url()</code>’ function</h3>
+ Slices: the ‘<code class=css>url()</code>’ notation</h3>
<p>The simplest way to indicate an image is to reference an image file by
URL. This is done with the <a
@@ -436,7 +455,7 @@
<!-- ====================================================================== -->
<h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
- Annotations: the ‘<code class=css>image()</code>’ function</h3>
+ Annotations: the ‘<code class=css>image()</code>’ notation</h3>
<p>The ‘<code class=css>image()</code>’ function allows an
author to specify an image with fallback images to be used if the original
@@ -454,10 +473,10 @@
<p>The ‘<code class=css>image()</code>’ notation is defined as:
- <pre class=prod><dfn id=ltimage-list><image-list></dfn> =
- image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
-
- <image-decl> = <string> [ ltr | rtl ]?</pre>
+ <pre class=prod><dfn
+ id=ltimage-list><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
+<dfn
+ id=ltimage-decl><image-decl></dfn> = <string> [ ltr | rtl ]?</pre>
<p>Each <code><string></code> must represent a <a
href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>.
@@ -526,10 +545,11 @@
<p>Along with each URL, the author may specify a directionality, similar to
adding a <code>dir</code> attribute to an element in HTML. The image
represented by the function takes on the directionality of the used URL.
- If a directional image is used on or in an element with opposite
- directionality, the image must be flipped in the inline direction (as if
- it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline
- direction is the X axis).
+ If a directional image is used on or in an element with opposite <a
+ href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>,
+ the image must be flipped in the inline direction (as if it was
+ transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is
+ the X axis).
<div class=example>
<p>A list may use an arrow for a bullet that points into the content. If
@@ -557,7 +577,7 @@
<!-- ====================================================================== -->
<h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
- Images: the ‘<code class=css>element()</code>’ function</h3>
+ Images: the ‘<code class=css>element()</code>’ notation</h3>
<p>The ‘<code class=css>element()</code>’ function allows an
author to use an element in the document as an image. As the referenced
@@ -855,7 +875,8 @@
<!-- ====================================================================== -->
- <h3 id=linear-gradients><span class=secno>4.1. </span> Linear Gradients</h3>
+ <h3 id=linear-gradients><span class=secno>4.1. </span> Linear Gradients:
+ the ‘<code class=css>linear-gradient()</code>’ notation</h3>
<p>A linear gradient is created by specifying a gradient-line and then
several colors placed along that line. The image is constructed by
@@ -1008,7 +1029,8 @@
</div>
<!-- ====================================================================== -->
- <h3 id=radial-gradients><span class=secno>4.2. </span> Radial Gradients</h3>
+ <h3 id=radial-gradients><span class=secno>4.2. </span> Radial Gradients:
+ the ‘<code class=css>radial-gradient()</code>’ notation</h3>
<p>In a radial gradient, rather than colors smoothly fading from one side
of the <a href="#gradient-box"><i>gradient box</i></a> to the other as
@@ -1294,7 +1316,9 @@
<!-- ====================================================================== -->
<h3 id=repeating-gradients><span class=secno>4.3. </span> Repeating
- Gradients</h3>
+ Gradients: the ‘<code
+ class=css>repeating-linear-gradient()</code>’ and ‘<code
+ class=css>repeating-radial-gradient()</code>’ notations</h3>
<p>In addition to the ‘<code
class=css>linear-gradient()</code>’ and ‘<code
@@ -2521,10 +2545,10 @@
<dt id=MEDIA-FRAGS>[MEDIA-FRAGS]
<dd>Raphaël Troncy; et al. <a
- href="http://www.w3.org/TR/2011/WD-media-frags-20110317"><cite>Media
- Fragments URI 1.0.</cite></a> 17 March 2011. W3C Working Draft. (Work in
- progress.) URL: <a
- href="http://www.w3.org/TR/2011/WD-media-frags-20110317">http://www.w3.org/TR/2011/WD-media-frags-20110317</a>
+ href="http://www.w3.org/TR/2011/CR-media-frags-20111201/"><cite>Media
+ Fragments URI 1.0.</cite></a> 1 December 2011. W3C Candidate
+ Recommendation. (Work in progress.) URL: <a
+ href="http://www.w3.org/TR/2011/CR-media-frags-20111201/">http://www.w3.org/TR/2011/CR-media-frags-20111201/</a>
</dd>
<!---->
@@ -2697,6 +2721,9 @@
<li><image>, <a href="#ltimage"
title="<image>"><strong>3.</strong></a>
+ <li><image-decl>, <a href="#ltimage-decl"
+ title="<image-decl>"><strong>3.2.</strong></a>
+
<li><image-list>, <a href="#ltimage-list"
title="<image-list>"><strong>3.2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.265
retrieving revision 1.266
diff -u -d -r1.265 -r1.266
--- Overview.src.html 3 Jan 2012 20:44:25 -0000 1.265
+++ Overview.src.html 4 Jan 2012 19:35:37 -0000 1.266
@@ -30,6 +30,12 @@
<dd><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/">http://www.w3.org/TR/2011/WD-css3-images-20110217/</a></dd>
<dd><a href="http://www.w3.org/TR/2009/WD-css3-images-20090723/">http://www.w3.org/TR/2009/WD-css3-images-20090723/</a></dd>
+ <dt>Issues List:</dt>
+ <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a>
+
+ <dt>Discussion List:</dt>
+ <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>”
+
<dt>Editors:</dt>
<dd class='vcard'>
<a class='url fn' href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (<span class='org'>Mozilla</span>)</dd>
@@ -136,7 +142,10 @@
<h2 id="image">
Image Values: the <image> type</h2>
- <p>The <image> value type denotes a 2D image. It is defined as
+ <p>The <image> value type denotes a 2D image. It represents either a
+ <a href="#url">url reference</a>, <a href="#image-notation">image notation</a>,
+ <a href="#element-reference">element reference</a>, or <a href="#gradients">gradient notation</a>.
+ Syntactically it is defined as
<pre class="prod"><dfn><image></dfn> = <i><url></i> | <i><image-list></i> | <i><element-reference></i> | <i><gradient></i></pre>
@@ -146,7 +155,7 @@
<!-- ====================================================================== -->
<h3 id="url">
-Image References and Image Slices: the ''url()'' function</h3>
+Image References and Image Slices: the ''url()'' notation</h3>
<p>The simplest way to indicate an image is to reference an image file by URL. This is done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>, defined in [[!CSS21]].
@@ -194,7 +203,7 @@
<!-- ====================================================================== -->
<h3 id="image-notation">
-Image Fallbacks and Annotations: the ''image()'' function</h3>
+Image Fallbacks and Annotations: the ''image()'' notation</h3>
<p>The ''image()'' function allows an author to specify an image with fallback images to be used if the original image can't be decoded or is a type that the browser doesn't recognize. Additionally, the author can specify a color as an ultimate fallback to be used when none of the images can be.</p>
@@ -205,10 +214,8 @@
<p>The ''image()'' notation is defined as:
- <pre class='prod'><dfn><image-list></dfn> =
- image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
-
- <image-decl> = <string> [ ltr | rtl ]?</pre>
+ <pre class='prod'><dfn><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
+<dfn><image-decl></dfn> = <string> [ ltr | rtl ]?</pre>
<p>Each <code><string></code> must represent a <a href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>.</p>
@@ -244,7 +251,7 @@
<p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
</div>
- <p>Along with each URL, the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML. The image represented by the function takes on the directionality of the used URL. If a directional image is used on or in an element with opposite directionality, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
+ <p>Along with each URL, the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML. The image represented by the function takes on the directionality of the used URL. If a directional image is used on or in an element with opposite <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
<div class='example'>
<p>A list may use an arrow for a bullet that points into the content. If the list can contain both LTR and RTL text, though, the bullet may be on the left or the right, and an image designed to point into the text on one side will point out of the text on the other side. This can be fixed with code like:</p>
@@ -267,7 +274,7 @@
<!-- ====================================================================== -->
<h3 id='element-reference'>
-Using Elements as Images: the ''element()'' function</h3>
+Using Elements as Images: the ''element()'' notation</h3>
<p>The ''element()'' function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background. The syntax for ''element()'' is:</p>
@@ -486,7 +493,7 @@
<!-- ====================================================================== -->
<h3 id='linear-gradients'>
-Linear Gradients</h3>
+Linear Gradients: the ''linear-gradient()'' notation</h3>
<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
@@ -605,7 +612,7 @@
<!-- ====================================================================== -->
<h3 id='radial-gradients'>
-Radial Gradients</h3>
+Radial Gradients: the ''radial-gradient()'' notation</h3>
<p>In a radial gradient, rather than colors smoothly fading from one side
of the <i>gradient box</i> to the other as with linear gradients, they instead emerge from
@@ -802,7 +809,7 @@
<!-- ====================================================================== -->
<h3 id='repeating-gradients'>
-Repeating Gradients</h3>
+Repeating Gradients: the ''repeating-linear-gradient()'' and ''repeating-radial-gradient()'' notations</h3>
<p>In addition to the ''linear-gradient()'' and ''radial-gradient()'' functions,
this specification defines ''repeating-linear-gradient()'' and
Received on Wednesday, 4 January 2012 19:35:51 UTC