W3C home > Mailing lists > Public > public-css-commits@w3.org > December 2011

csswg/css3-images Overview.html,1.231,1.232 Overview.src.html,1.238,1.239

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
Message-Id: <E1RWDsh-0005ml-TB@lionel-hutz.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 &lsquo;<code class=property>contain</code>&rsquo;
-    gradient.</p>
+   <p>Here we illustrate a &lsquo;<code
+    class=property>closest-side</code>&rsquo; 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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:08 UTC