[css-backgrounds-4] Added previews for colors (w3c#8178)

Author: SebastianZ

css-backgrounds-4/Overview.bs

@@ -21,6 +21,8 @@ spec:css-text-4; type:value; text:collapse
 spec:css-shapes-2; type:function; text:path()
 </pre>
 
+<link rel="stylesheet" href="style.css" />
+
 <h2 id="intro">
 Introduction</h2>
 
@@ -221,7 +223,7 @@ Painting Area: the 'background-clip' property</h3>
 		<pre class=lang-css>
 		.foo {
 			border: 30px solid;
-			border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
+			border-color: stripes(<span class="swatch" tabIndex="0" style="--color: dodgerblue"></span>dodgerblue, <span class="swatch" tabIndex="0" style="--color: skyblue"></span>skyblue) stripes(<span class="swatch" tabIndex="0" style="--color: yellow"></span>yellow, <span class="swatch" tabIndex="0" style="--color: gold"></span>gold) stripes(<span class="swatch" tabIndex="0" style="--color: lightgreen"></span>lightgreen, <span class="swatch" tabIndex="0" style="--color: limegreen"></span>limegreen) stripes(<span class="swatch" tabIndex="0" style="--color: indianred"></span>indianred, <span class="swatch" tabIndex="0" style="--color: orange"></span>orange);
 		}
 		</pre>
 

css-backgrounds-4/style.css

@@ -0,0 +1,19 @@
+.swatch {
+	position: relative;
+	z-index: 1;
+	display: inline-block;
+	vertical-align: calc(-.1em - 3px);
+	padding: .6em;
+	background-color: var(--color);
+	border: 3px solid white;
+	border-radius: 3px;
+	box-shadow: 1px 1px 1px rgba(0,0,0,.15)
+}
+
+.swatch:hover,
+.swatch:focus {
+	transform: scale(3);
+	border-radius: 2px;
+	transition: .4s;
+	z-index: 2;
+}