Skip to content

Commit 6ae407c

Browse files
meyerwebmeyerweb
committed
Added rainbows to gradient-hints
1 parent 589247e commit 6ae407c

File tree

1 file changed

+33
-17
lines changed

1 file changed

+33
-17
lines changed

‎gradient-hints.html

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,37 @@
1212
li div::before {content: attr(class);}
1313

1414
li .base, li .five {margin-top: 0.5em;}
15-
#l1 {width: 10em;}
16-
#l1 .base {background: linear-gradient(to right, black, transparent 10em);}
17-
#l1 .one {background: linear-gradient(to right, black, 3em, transparent 10em);}
18-
#l1 .two {background: linear-gradient(to right, black, 1em, transparent 10em);}
19-
#l1 .three {background: linear-gradient(to right, black, 7em, transparent 10em);}
20-
#l1 .four {background: linear-gradient(to right, black, 9.95em, transparent 10em);}
21-
#l1 .five {background: linear-gradient(to right, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
22-
23-
#l2 {width: 20em;}
24-
#l2 .base {background: radial-gradient(circle at center, black, transparent 10em);}
25-
#l2 .one {background: radial-gradient(circle at center, black, 3em, transparent 10em);}
26-
#l2 .two {background: radial-gradient(circle at center, black, 1em, transparent 10em);}
27-
#l2 .three {background: radial-gradient(circle at center, black, 7em, transparent 10em);}
28-
#l2 .four {background: radial-gradient(circle at center, black, 9.95em, transparent 10em);}
29-
#l2 .five {background: radial-gradient(circle at center, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
15+
#li1 {width: 10em;}
16+
#li1 .base {background: linear-gradient(to right, black, transparent 10em);}
17+
#li1 .one {background: linear-gradient(to right, black, 3em, transparent 10em);}
18+
#li1 .two {background: linear-gradient(to right, black, 1em, transparent 10em);}
19+
#li1 .three {background: linear-gradient(to right, black, 7em, transparent 10em);}
20+
#li1 .four {background: linear-gradient(to right, black, 9.95em, transparent 10em);}
21+
#li1 .five {background: linear-gradient(to right, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
22+
23+
#li2 {width: 20em;}
24+
#li2 .base {background: radial-gradient(circle at center, black, transparent 10em);}
25+
#li2 .one {background: radial-gradient(circle at center, black, 3em, transparent 10em);}
26+
#li2 .two {background: radial-gradient(circle at center, black, 1em, transparent 10em);}
27+
#li2 .three {background: radial-gradient(circle at center, black, 7em, transparent 10em);}
28+
#li2 .four {background: radial-gradient(circle at center, black, 9.95em, transparent 10em);}
29+
#li2 .five {background: radial-gradient(circle at center, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
30+
31+
#li3 {width: 20em;}
32+
#li3 div {padding: 2.5em 5em;}
33+
#li3 .base {background: radial-gradient(circle at center, red, orange, yellow, green, blue, purple);}
34+
#li3 .one {background: radial-gradient(circle at center, red, 15%, orange 15%, 35%, yellow 35%, 55%, green 55%, 75%, blue 75%, 95%, purple 95%);}
35+
#li3 .two {background: radial-gradient(circle at center, red, 10%, orange 15%, 30%, yellow 35%, 50%, green 55%, 70%, blue 75%, 90%, purple 95%);}
36+
#li3 .three {background: radial-gradient(circle at center, red, 5%, orange 15%, 20%, yellow 35%, 40%, green 55%, 60%, blue 75%, 80%, purple 95%);}
3037
</style>
3138
</head>
3239
<body>
3340

3441
<h1>Hinted gradients</h1>
3542

3643
<ol>
37-
<li id="l1">
44+
45+
<li id="li1">
3846
<div class="base"></div>
3947
<div class="one"></div>
4048
<div class="two"></div>
@@ -44,7 +52,7 @@ <h1>Hinted gradients</h1>
4452
<div class="five"></div>
4553
</li>
4654

47-
<li id="l2">
55+
<li id="li2">
4856
<div class="base"></div>
4957
<div class="one"></div>
5058
<div class="two"></div>
@@ -53,6 +61,14 @@ <h1>Hinted gradients</h1>
5361
<div class="four"></div>
5462
<div class="five"></div>
5563
</li>
64+
65+
<li id="li3">
66+
<div class="base"></div>
67+
<div class="one"></div>
68+
<div class="two"></div>
69+
<div class="three"></div>
70+
</li>
71+
5672
</ol>
5773

5874
</body>

0 commit comments

Comments
 (0)