csswg-drafts/css-borders-4/ridge-borders/index.html at scroll-queue · zignis/csswg-drafts · GitHub

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
<!doctype html>
<meta charset=utf-8>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Ridge Border Tester</title>

<table>
	<thead>
		<tr><th>Color<th>Solid<th>Ridge<th>Chrome<th>Firefox<th>Actual Colors
	</thead>
	<tr style="--color: black">
		<th>black
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=black-chrome.png>
		<td><img src=black-firefox.png>
		<td>Chrome: #545454 / #000
			<br>Firefox: #b2b2b2 / #4c4c4c
	<tr style="--color: #111">
		<th>#111
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=111-chrome.png>
		<td><img src=111-firefox.png>
		<td>Chrome: #656565 / #000
			<br>Firefox: #111 / #0b0b0b
	<tr style="--color: #888">
		<th>#888
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=888-chrome.png>
		<td><img src=888-firefox.png>
		<td>Chrome: #888 / #343434
			<br>Firefox: #888 / #5b5b5b
	<tr style="--color: #eee">
		<th>#eee
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=eee-chrome.png>
		<td><img src=eee-firefox.png>
		<td>Chrome: #eee / #9a9a9a
			<br>Firefox: #eee / #9f9f9f
	<tr style="--color: white">
		<th>white
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=white-chrome.png>
		<td><img src=white-firefox.png>
		<td>Chrome: #fff / #ababab
			<br>Firefox: #fff / #aaa
</table>
<style>
table {
	--size: 20px;
}
td {
	padding: .5em;
}
img {
	display: block;
	width: calc(3 * var(--size));
	height: calc(3 * var(--size));
}
div.border {
	width: var(--size);
	height: var(--size);
	border: var(--size) var(--color);
	border-radius: var(--size);

	&.solid {
		border-style: solid;
	}
	&.ridge {
		border-style: ridge;
	}
}
td:has(div.border) {
	background: repeating-linear-gradient(45deg, #eee 0 5px, #ddd 5px 10px);
}
</style>