dom-examples/css-custom-functions/color-adjust-functions/style.css at af3b9300e663b1c18361d5522d1e41a63c9d77fc · mdn/dom-examples · 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
/* Borrowed from Miriam Suzanne's custom CSS functions post
   https://www.oddbird.net/2025/04/11/custom-functions/  */
@function --transparent(--color <color>, --alpha <number>: 0.8) returns <color> {
  result: oklch(from var(--color) l c h / var(--alpha));
}

@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

@function --darker(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  result: oklch(from var(--color) calc(l - var(--lightness-adjust)) c h);
}

/* Function that returns a value of none to hide a "not supported" banner
if CSS custom functions are supported. If not, the banner will show. */
@function --supports() {
  result: none;
}

:root {
  font-family: system-ui;
  height: 100%;
  --base-color: #faa6ff;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

section {
  width: 50%;
  padding: 0 20px;
  border-radius: 20px;
  background-color: --transparent(var(--base-color));
  border: 3px solid --lighter(var(--base-color), 0.1);
  color: --darker(var(--base-color), 0.55);
}

h2 {
  font-size: 2rem;
}

p {
  font-size: 1.4rem;
  line-height: 1.5;
}

/* Styling for the support banner */
.support {
  border-radius: 0;
  border: 6px dashed black;
  background-color: #fef0c3;
  font-size: 1.3rem;
  padding: 1rem;
  position: absolute;
  inset: 25%;
  display: --supports();
}