- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 01 Dec 2011 21:09:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv22225
Modified Files:
Overview.html Overview.src.html
Log Message:
Fix the r-g examples to use the new syntax.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.231
retrieving revision 1.232
diff -u -d -r1.231 -r1.232
--- Overview.html 1 Dec 2011 20:53:45 -0000 1.231
+++ Overview.html 1 Dec 2011 21:09:21 -0000 1.232
@@ -1224,11 +1224,12 @@
and 100px tall.
<div class=example>
- <p>These examples demonstrate the basic syntax for radial gradients:</p>
+ <p>These examples demonstrate different ways to write the basic syntax for
+ radial gradients:</p>
<pre><code>radial-gradient(yellow, green);
-radial-gradient(center, ellipse cover, yellow 0%, green 100%);
-radial-gradient(50% 50%, farthest-corner, yellow, green);</code></pre>
+radial-gradient(ellipse at center, yellow 0%, green 100%);
+radial-gradient(farthest-corner at 50% 50%, yellow, green);</code></pre>
<p><img alt="" src=radial1.png></p>
@@ -1245,22 +1246,22 @@
<p>This image shows a gradient originating from somewhere other than the
center of the box:</p>
- <pre><code>radial-gradient(bottom left, farthest-side, red, yellow 50px, green);</code></pre>
+ <pre><code>radial-gradient(farthest-side at bottom left, red, yellow 50px, green);</code></pre>
<p><img alt="" src=radial4.png></p>
</div>
<div class=example>
- <p>Here we illustrate a ‘<code class=property>contain</code>’
- gradient.</p>
+ <p>Here we illustrate a ‘<code
+ class=property>closest-side</code>’ gradient.</p>
- <pre><code>radial-gradient(20px 30px, contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 30px, red, yellow, green);</code></pre>
+ <pre><code>radial-gradient(closest-side at 20px 30px, red, yellow, green);
+radial-gradient(20px 30px at 20px 30px, red, yellow, green);</code></pre>
<p><img alt="" src=radial6.png></p>
- <pre><code>radial-gradient(20px 30px, circle contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 20px, red, yellow, green);</code></pre>
+ <pre><code>radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
+radial-gradient(20px 20px at 20px 30px, red, yellow, green);</code></pre>
<p><img alt="" src=radial7.png></p>
</div>
@@ -1300,7 +1301,7 @@
<p><img alt="" src=repeating2.png></p>
- <pre><code>repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
+ <pre><code>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
<p><img alt="" src=repeating3.png></p>
</div>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.238
retrieving revision 1.239
diff -u -d -r1.238 -r1.239
--- Overview.src.html 1 Dec 2011 20:53:45 -0000 1.238
+++ Overview.src.html 1 Dec 2011 21:09:21 -0000 1.239
@@ -751,11 +751,11 @@
and 100px tall.</p>
<div class=example>
- <p>These examples demonstrate the basic syntax for radial gradients:</p>
+ <p>These examples demonstrate different ways to write the basic syntax for radial gradients:</p>
<pre><code>radial-gradient(yellow, green);
-radial-gradient(center, ellipse cover, yellow 0%, green 100%);
-radial-gradient(50% 50%, farthest-corner, yellow, green);</code></pre>
+radial-gradient(ellipse at center, yellow 0%, green 100%);
+radial-gradient(farthest-corner at 50% 50%, yellow, green);</code></pre>
<p><img src="radial1.png" alt="" ></p>
<pre><code>radial-gradient(circle, yellow, green);</code></pre>
@@ -768,19 +768,19 @@
<div class=example>
<p>This image shows a gradient originating from somewhere other than the center of the box:</p>
- <pre><code>radial-gradient(bottom left, farthest-side, red, yellow 50px, green);</code></pre>
+ <pre><code>radial-gradient(farthest-side at bottom left, red, yellow 50px, green);</code></pre>
<p><img src="radial4.png" alt="" ></p>
</div>
<div class=example>
- <p>Here we illustrate a 'contain' gradient.</p>
+ <p>Here we illustrate a 'closest-side' gradient.</p>
- <pre><code>radial-gradient(20px 30px, contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 30px, red, yellow, green);</code></pre>
+ <pre><code>radial-gradient(closest-side at 20px 30px, red, yellow, green);
+radial-gradient(20px 30px at 20px 30px, red, yellow, green);</code></pre>
<p><img src="radial6.png" alt="" ></p>
- <pre><code>radial-gradient(20px 30px, circle contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 20px, red, yellow, green);</code></pre>
+ <pre><code>radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
+radial-gradient(20px 20px at 20px 30px, red, yellow, green);</code></pre>
<p><img src="radial7.png" alt="" ></p>
</div>
@@ -813,7 +813,7 @@
<pre><code>repeating-radial-gradient(red, blue 20px, red 40px)</code></pre>
<p><img src="repeating2.png" alt=""></p>
- <pre><code>repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
+ <pre><code>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
<p><img src="repeating3.png" alt=""></p>
</div>
Received on Thursday, 1 December 2011 21:09:26 UTC