Updates to hinted-gradient test

meyerweb · meyerweb · commit 1d63bda78d13 · 2017-05-12T16:32:35.000-04:00
diff --git a/gradient-hints.html b/gradient-hints.html
@@ -7,25 +7,26 @@
 ol {margin: 0; padding: 0; display: flex;}
 li {font: 1em/1 Georgia, serif; margin: 0 2em;}
 li div {background: #F77; color: #FFF; text-shadow: 0 0 0.125em black, 0 0 0.125em black;
-	padding: 1.5em;
-	font-weight: bold;}
+	padding: 2em 1.5em;
+	font-weight: bold; text-align: center;}
 li div::before {content: attr(class);}
 
-li .base {margin-top: 0.5em;}
+li .base, li .five {margin-top: 0.5em;}
 #l1 {width: 10em;}
 #l1 .base {background: linear-gradient(to right, black, transparent 10em);}
 #l1 .one {background: linear-gradient(to right, black, 4em, transparent 10em);}
-#l1 .two {background: linear-gradient(to right, black, gray 3em, 4em, transparent 10em);}
+#l1 .two {background: linear-gradient(to right, black, 1em, gray 3em, 4em, transparent 10em);}
 #l1 .three {background: linear-gradient(to right, black, 8em, transparent 10em);}
 #l1 .four {background: linear-gradient(to right, black, 9.95em, transparent 10em);}
+#l1 .five {background: linear-gradient(to right, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
 
 #l2 {width: 20em;}
-#l2 div {text-align: center;}
 #l2 .base {background: radial-gradient(circle at center, black, transparent 10em);}
 #l2 .one {background: radial-gradient(circle at center, black, 4em, transparent 10em);}
-#l2 .two {background: radial-gradient(circle at center, black, gray 3em, 4em, transparent 10em);}
+#l2 .two {background: radial-gradient(circle at center, black, 1em, gray 3em, 4em, transparent 10em);}
 #l2 .three {background: radial-gradient(circle at center, black, 8em, transparent 10em);}
 #l2 .four {background: radial-gradient(circle at center, black, 9.95em, transparent 10em);}
+#l2 .five {background: radial-gradient(circle at center, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
 </style>
 </head>
 <body>
@@ -40,6 +41,7 @@ <h1>Hinted gradients</h1>
 <div class="base"></div>
 <div class="three"></div>
 <div class="four"></div>
+<div class="five"></div>
 </li>
 
 <li id="l2">
@@ -49,6 +51,7 @@ <h1>Hinted gradients</h1>
 <div class="base"></div>
 <div class="three"></div>
 <div class="four"></div>
+<div class="five"></div>
 </li>
 </ol>
 
