src/css-experiments.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

---
title = "CSS Experiments"
layout = "base.njk"
---

<style>
.warning {
	display: none;
}

.warning + span {
	color: #3d4041;
	text-shadow: none;
	border: 1px solid #3d4041;
	border-radius: 0.25em;
	padding: 0 0.25em;
}

.warning:checked + span {
	color: pink;
	text-shadow: 0 0 4px red, 0 0 12px red;
	border: 1px solid pink;
	border-radius: 0.25em;
	box-shadow: 0 0 8px red;
	padding: 0 0.25em;
}
</style>

<section>
	<p>Silly warning label. I've made it toggleable, because why not:
	<label>
		<input type=checkbox class=warning />
		<span>MERCURY IN RETROGRADE</span>
	</label>
</section>