-
Notifications
You must be signed in to change notification settings - Fork 14
/
gradient-hints.html
75 lines (65 loc) · 2.78 KB
/
gradient-hints.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<title>Hinted Gradients</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
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: 2em 1.5em;
font-weight: bold; text-align: center;}
li div::before {content: attr(class);}
li .base, li .five {margin-top: 0.5em;}
#li1 {width: 10em;}
#li1 .base {background: linear-gradient(to right, black, transparent 10em);}
#li1 .one {background: linear-gradient(to right, black, 3em, transparent 10em);}
#li1 .two {background: linear-gradient(to right, black, 1em, transparent 10em);}
#li1 .three {background: linear-gradient(to right, black, 7em, transparent 10em);}
#li1 .four {background: linear-gradient(to right, black, 9.95em, transparent 10em);}
#li1 .five {background: linear-gradient(to right, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
#li2 {width: 20em;}
#li2 .base {background: radial-gradient(circle at center, black, transparent 10em);}
#li2 .one {background: radial-gradient(circle at center, black, 3em, transparent 10em);}
#li2 .two {background: radial-gradient(circle at center, black, 1em, transparent 10em);}
#li2 .three {background: radial-gradient(circle at center, black, 7em, transparent 10em);}
#li2 .four {background: radial-gradient(circle at center, black, 9.95em, transparent 10em);}
#li2 .five {background: radial-gradient(circle at center, black 1em, 1em, transparent 2em, 2em, black 3em, 3em, transparent 4em, 4em, black);}
#li3 {width: 20em;}
#li3 div {padding: 2.5em 5em;}
#li3 .base {background: radial-gradient(circle at center, red, orange, yellow, green, blue, purple);}
#li3 .one {background: radial-gradient(circle at center, red, 15%, orange 15%, 35%, yellow 35%, 55%, green 55%, 75%, blue 75%, 95%, purple 95%);}
#li3 .two {background: radial-gradient(circle at center, red, 10%, orange 15%, 30%, yellow 35%, 50%, green 55%, 70%, blue 75%, 90%, purple 95%);}
#li3 .three {background: radial-gradient(circle at center, red, 5%, orange 15%, 20%, yellow 35%, 40%, green 55%, 60%, blue 75%, 80%, purple 95%);}
</style>
</head>
<body>
<h1>Hinted gradients</h1>
<ol>
<li id="li1">
<div class="base"></div>
<div class="one"></div>
<div class="two"></div>
<div class="base"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</li>
<li id="li2">
<div class="base"></div>
<div class="one"></div>
<div class="two"></div>
<div class="base"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</li>
<li id="li3">
<div class="base"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</li>
</ol>
</body>
</html>