[css-values-5][editorial] Add example, rephrase. #6245

Author: tabatkins

css-values-5/Overview.bs

@@ -1012,6 +1012,57 @@ Interpolation Mapping Notations: the *-interpolate() family</h2>
 	* |stop| represents an [=interpolation stop=]; see [[#interpolation-map-arguments]]
 	* |between-options| specifies options for the interpolation between the two surrounding stops.
 
+	<div class=example>
+		For example,
+		the following changes the background color of an element
+		depending on the width of the viewport:
+
+		<pre highlight=css>
+			background: color-interpolate(100vw in lch,
+				200px: palegoldenrod,
+				800px: palegreen,
+				2000px: powderblue
+			);
+		</pre>
+
+		* Below ''200px'', the color is ''palegoldenrod'';
+		* From ''200px'' to ''800px'',
+			the color interpolates in ''lch''
+			from ''palegoldenrod'' to ''palegreen'';
+		* From ''800px'' to ''2000px'',
+			the color interpolate in ''lch''
+			from ''palegreen'' to ''powderblue'';
+		* Above ''2000px'', the color is ''powderblue''.
+	</div>
+
+	<div class=example>
+		In the following example,
+		the font size interpolates from a smaller size on small screens
+		to a larger size on large screens,
+		easing along the interpolation curve.
+		The author is storing the progress scale in a custom property
+		to be able to re-use it across multiple 'font-size' declarations
+		throughout the document.
+
+		<pre highlight=css>
+			html {
+				--font-scale: progress(100vw, 200px, 2000px) ease-in-out;
+				font-size: calc-interpolate(var(--font-scale),
+					0%: 16px,
+					70%: 20px,
+					100%: 24px);
+			}
+			h1 {
+				font-size: calc-interpolate(var(--font-scale),
+					0%: 1.2rem,
+					40%: 2rem,
+					100%: 3rem);
+			}
+		</pre>
+
+		ISSUE: If anyone has better examples to punch in here let us know...
+	</div>
+
 	The [=interpolation notations=] in CSS include:
 	* ''calc-interpolate()'',
 		for interpolating <<number>>, <<length>>, <<percentage>>, <<time>>,
@@ -1179,6 +1230,7 @@ Defining the Interpolation Map</h4>
 			When appearing in the first argument,
 			provides any type-specific interpolation options
 			that apply to every segment in the [=interpolation map=].
+			(For example, ''color-interpolate()'' allows <<color-interpolation-method>>.)
 			When appearing between stops,
 			provides any type-specific interpolation options
 			that apply to the interpolation segment between
@@ -1224,9 +1276,9 @@ Calculating the Absolute Interpolation Range</h4>
 
 	In an [=absolutely=] typed [=interpolation map=],
 	the first and last [=absolute=] stops in the list
-	are pinned to 0% and 100%, respectively.
+	are assigned to 0% and 100%, respectively.
 	(If there is only one [=absolutely=] typed [=interpolation stop=],
-	it is pinned to both 0% and 100%.)
+	it is assigned to both 0% and 100%.)
 
 	A [=proportionally=] typed [=interpolation map=]
 	does not define an [=interpolation range=].