- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 02 Aug 2011 22:43:22 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv16430
Modified Files:
Overview.html Overview.src.html
Log Message:
Switched linear gradients keywords to "upward/rightward/downward/leftward".
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.118
retrieving revision 1.119
diff -u -d -r1.118 -r1.119
--- Overview.html 2 Aug 2011 20:27:00 -0000 1.118
+++ Overview.html 2 Aug 2011 22:43:20 -0000 1.119
@@ -151,17 +151,9 @@
Image Slices: the ‘<code class=css>url()</code>’
notation</a>
- <li><a href="#image-notation"><span class=secno>4.2. </span> Image
- Annotations and Fallbacks: the ‘<code
- class=css>image()</code>’ notation</a>
-
- <li><a href="#element-reference"><span class=secno>4.3. </span> Using
+ <li><a href="#element-reference"><span class=secno>4.2. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
notation</a>
[...1231 lines suppressed...]
-
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
<h2 class=no-num id=references>References</h2>
@@ -2711,15 +1600,6 @@
</dd>
<!---->
- <dt id=CSSOM>[CSSOM]
-
- <dd>Anne van Kesteren. <a
- href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a>
- 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a>
- </dd>
- <!---->
-
<dt id=SMIL10>[SMIL10]
<dd>Philipp Hoschka. <a
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.125
retrieving revision 1.126
diff -u -d -r1.125 -r1.126
--- Overview.src.html 2 Aug 2011 22:20:45 -0000 1.125
+++ Overview.src.html 2 Aug 2011 22:43:20 -0000 1.126
@@ -388,17 +388,13 @@
linear-gradient() syntax</h4>
<pre class=prod><code><dfn><linear-gradient></dfn> = linear-gradient(
- [[
- [ [ top | bottom ] || [ left | right ] ]
- |
- <angle>
- ],]?
+ [[ <angle> | upward | rightward | leftward | downward ],]?
<color-stop>[, <color-stop>]+
);</code></pre>
<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 ''bottom''.</p>
+ positioned. It may be omitted; if so, it defaults to "downward".</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;
@@ -412,19 +408,7 @@
direction. The starting-point is determined identically, except in the
opposite direction of the angle.</p>
- <p>The second way is to simply provide one or two keywords representing the
- side or corner of the box that the <i>gradient-line</i> should point towards.
- Similar to the previous case, 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 box. If a single keyword is specified, the line
- assumes the necessary angle to place the starting-point of the <i>gradient-line</i>
- in the center of the side specified by the keyword; if two keywords are specified,
- the line assumes the necessary angle to place the starting-point of the
- <i>gradient-line</i> in the specified corner of the box. The ending-point
- of the gradient-line is then where the line intersects the opposite side or
- corner of the box.</p>
-
- <p class='issue'>This usage of keywords appears to be subtly confusing. When you ask solely about how keywords should work, most people prefer the above model (keyword denotes starting point). Similarly, most people prefer the way angles currently work. When you ask about whether "bottom" and "0deg" should be the same direction or opposite, though, most people prefer them to be opposite, despite that being contradictory with one of their previous answers. I am exploring alternate solutions that resolve this problem of expectations.</p>
+ <p>Alternately, a keyword may be used to indicate the <i title="gradient-line">gradient-line's</i> direction. The "upward" keyword places the starting-point of the gradient-line in the center of the bottom edge of the box and the ending-point of the <i>gradient-line</i> in the center of the top edge of the box, similar to how a value of "0deg" works. The "rightward", "downward", and "leftward" keywords are defined the same, <i>mutatis mutandis</i>.</p>
<div class=example>
<div style="overflow: hidden">
@@ -462,27 +446,16 @@
<p>Below are various ways of specifying a basic vertical gradient:</p>
<pre><code>linear-gradient(yellow, blue);
-linear-gradient(top, yellow, blue);
+linear-gradient(downward, yellow, blue);
linear-gradient(180deg, yellow, blue);
-linear-gradient(bottom, blue, yellow);
-linear-gradient(top, yellow 0%, blue 100%);</code></pre>
+linear-gradient(upward, blue, yellow);
+linear-gradient(downward, yellow 0%, blue 100%);</code></pre>
<p><img src="linear1.png" alt="" ></p>
</div>
<div class=example>
- <p>This gradient goes from the top-left to the bottom-right corner.</p>
-
- <pre><code>linear-gradient(top left, yellow, blue);</code></pre>
-
- <p><img src="linear2.png" alt="" ></p>
- </div>
-
- <div class=example>
- <p>This demonstrates the use of an angle in the gradient. Compare this
- image with the previous example. In both gradients, the top-left of the
- 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>
+ <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>
@@ -686,11 +659,7 @@
siblings defined previously:</p>
<pre class=prod><code><dfn><repeating-linear-gradient></dfn> = repeating-linear-gradient(
- [[
- [ [top | bottom] || [left | right] ]
- ||
- <angle>
- ],]?
+ [[ <angle> | upward | rightward | downward | leftward ],]?
<color-stop>[, <color-stop>]+
)
<dfn><repeating-radial-gradient></dfn> = repeating-radial-gradient(
Received on Tuesday, 2 August 2011 22:43:24 UTC