forked from cmda-minor-web/css-to-the-rescue-2223
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (156 loc) · 5.11 KB
/
index.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS-Modules</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<header>
<h1>Please download Chrome Dev ☹️</h1>
</header>
<div>
<p>To properly view this page you need to have a chromium based <i>dev</i> browser with the experimental web features flag enabled.</p>
</div>
</article>
<div>
<input type="radio" name="controls" id="showNone">
<input type="radio" name="controls" id="showInterpolationSection">
<input type="radio" name="controls" id="showP3Section">
<input type="radio" name="controls" id="showNestingSection">
<input type="checkbox" name="oldInterpolation" id="oldInterpolation">
<input type="checkbox" name="oldColor" id="oldColor">
</div>
<main>
<ul>
<li>
<label for="showInterpolationSection"></label>
<section>
<div></div>
</section>
<!-- Faces -->
<section>
<!-- Front -->
<div></div>
<!-- Back -->
<div></div>
<!-- Right -->
<div></div>
<!-- Left -->
<div></div>
<!-- Top -->
<div></div>
<!-- Bottom -->
<div></div>
</section>
</li>
<li>
<label for="showP3Section"></label>
<section>
<div></div>
</section>
<!-- Faces -->
<section>
<!-- Front -->
<div></div>
<!-- Back -->
<div></div>
<!-- Right -->
<div></div>
<!-- Left -->
<div></div>
<!-- Top -->
<div></div>
<!-- Bottom -->
<div></div>
</section>
</li>
<li>
<label for="showNestingSection"></label>
<section>
<div></div>
</section>
<!-- Faces -->
<section>
<!-- Front -->
<div></div>
<!-- Back -->
<div></div>
<!-- Right -->
<div></div>
<!-- Left -->
<div></div>
<!-- Top -->
<div></div>
<!-- Bottom -->
<div></div>
</section>
</li>
</ul>
</main>
<aside>
<!-- Gradient Interpolation Window -->
<article>
<header>
<h1>Animating Gradients is now possible! 🎉</h1>
<button><label for="showNone">X</label></button>
</header>
<div>
<h1>Thanks to the custom <code>@property</code></h1>
<p>Before <i>custom properties</i> were a thing animating CSS-gradients was not possible without using some kind of hack.</p>
<p>So you either made a huge gradient background and animate the position. Or you ended up with a harsh animation.</p>
<p><strong>Click on the button below to see what it used to look like</strong></p>
<p><button><label for="oldInterpolation">Go back to the <i>good</i> old days</label></button> <button><label for="oldInterpolation">Ugly, huh? Click me to go back to the good new days</label></button></p>
<p><img src="assets/cp-1.png" alt=""></p>
</div>
</article>
<!-- Display P3 Window -->
<article>
<header>
<h1>Wow so beautiful 😱</h1>
<button><label for="showNone">X</label></button>
</header>
<div>
<h1>Thanks to the brand-new <code>color()</code> function with Display-P3</h1>
<p><code>display-p3</code> is a <i>color profile</i> by Apple that displays more vibrant colors</p>
<p>
If you have a high-end screen and are on safari or on chromium based browsers
with the <i>force color profile</i> flag set to display-p3 click the button below to see what it looks like in RGB!
</p>
<p><button><label for="oldColor">Go back to the <i>good</i> old days</label></button><button><label for="oldColor">Ugly, huh? Click me to go back to the good new days</label></button></p>
<p><img src="assets/p3-1.png" alt=""></p>
</div>
</article>
<!-- CSS Nesting -->
<article>
<header>
<h1><strong>C</strong>ozy Cascading Stylesheet? 🦄</h1>
<button><label for="showNone">X</label></button>
</header>
<div>
<h1>A warm-welcome to CSS-nesting. The cozy way of writing CSS</h1>
<p>Stop relying on CSS preprocessors for your CSS-nesting with the CSS-nesting module 1 introduced earlier this year.</p>
<p><strong>Though it's barely supported anywhere <i>yet</i>:</strong></p>
<p>
<img src="assets/caniuse-nesting.png" alt="">
</p>
<p><strong>But looks like this:</strong></p>
<p>
<img src="assets/n-1.png" alt="">
</p>
</div>
</article>
</aside>
<nav>
<ul>
<li><a href="/versie-1">Versie 1</a></li>
<li><a href="/versie-2">Versie 2</a></li>
<li active><a href="/">The GOAT</a></li>
</ul>
</nav>
</body>
</html>