Skip to content

Commit 71e56e4

Browse files
chrisdavidmillspepelsbey
chrisdavidmills
and
pepelsbey
authored
Add CSS custom functions examples (#327)
* Add CSS custom functions examples * Add return types to one of the examples * Update css-custom-functions/gradient-function/style.css Co-authored-by: Vadim Makeev <[email protected]> * Update css-custom-functions/color-adjust-functions/style.css Co-authored-by: Vadim Makeev <[email protected]> * Add browser support check, and other fixes from pepelsbey review --------- Co-authored-by: Vadim Makeev <[email protected]>
1 parent 3f44f83 commit 71e56e4

File tree

7 files changed

+295
-1
lines changed

7 files changed

+295
-1
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
2323

2424
- The "contact-picker" directory contains an example showing usage of the [Contact Picker API](https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API). [See the example live](https://mdn.github.io/dom-examples/contact-picker/).
2525

26-
- The "css-carousels" directory contains two examples showing how to use the CSS Carousel features — [a basic example featuring scroll buttons and scroll markers](https://mdn.github.io/dom-examples/css-carousels/scroll-button-scroll-marker/), and an [example that also uses the `::columns` pseudo-class to paginate the content](https://mdn.github.io/dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/).
26+
- The "css-carousels" directory contains two examples showing how to use the CSS Carousel features — [a set of color adjustment functions](https://mdn.github.io/dom-examples/css-carousels/color-adjust-functions/), a [complex gradient background function](https://mdn.github.io/dom-examples/css-carousels/gradient-function/), and a [responsive narrow/wide value selection function](https://mdn.github.io/dom-examples/css-carousels/responsive-narrow-wide/).
27+
28+
- The "css-custom-functions" directory contains three examples showing how to use CSS custom functions — [a basic example featuring scroll buttons and scroll markers](https://mdn.github.io/dom-examples/css-carousels/scroll-button-scroll-marker/), and an [example that also uses the `::columns` pseudo-class to paginate the content](https://mdn.github.io/dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/).
2729

2830
- The "css-painting" directory contains examples demonstrating the [CSS Painting API](https://developer.mozilla.org/docs/Web/API/CSS_Painting_API). See the [examples live](https://mdn.github.io/dom-examples/css-painting).
2931

‎css-custom-functions/color-adjust-functions/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Color adjust functions</title>
6+
<link href="style.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<p class="support">
10+
⚠️ Your browser doesn't currently support
11+
<a href="https://drafts.csswg.org/css-mixins-1/#defining-custom-functions"
12+
>CSS custom functions</a
13+
>.
14+
</p>
15+
<section>
16+
<h2>Color adjust functions</h2>
17+
<p>
18+
This example features a set of color adjust functions that return a
19+
semi-transparent version of a given color, a lighter version of the
20+
color, or a darker version of the color.
21+
</p>
22+
</section>
23+
</body>
24+
</html>

‎css-custom-functions/color-adjust-functions/style.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* Borrowed from Miriam Suzanne's custom CSS functions post
2+
https://www.oddbird.net/2025/04/11/custom-functions/ */
3+
@function --transparent(--color <color>, --alpha <number>: 0.8) returns <color> {
4+
result: oklch(from var(--color) l c h / var(--alpha));
5+
}
6+
7+
@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
8+
<color> {
9+
result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
10+
}
11+
12+
@function --darker(--color <color>, --lightness-adjust <number>: 0.2) returns
13+
<color> {
14+
result: oklch(from var(--color) calc(l - var(--lightness-adjust)) c h);
15+
}
16+
17+
/* Function that returns a value of none to hide a "not supported" banner
18+
if CSS custom functions are supported. If not, the banner will show. */
19+
@function --supports() {
20+
result: none;
21+
}
22+
23+
html {
24+
font-family: system-ui;
25+
height: 100%;
26+
}
27+
28+
body {
29+
margin: 0;
30+
height: inherit;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
background-image: repeating-linear-gradient(
35+
-45deg,
36+
transparent 0 20px,
37+
lightgrey 20px 40px
38+
);
39+
}
40+
41+
section {
42+
width: 50%;
43+
padding: 0 20px;
44+
border-radius: 20px;
45+
--base-color: #faa6ff;
46+
background-color: --transparent(var(--base-color));
47+
border: 3px solid --lighter(var(--base-color), 0.1);
48+
color: --darker(var(--base-color), 0.55);
49+
}
50+
51+
h2 {
52+
font-size: 2rem;
53+
}
54+
55+
p {
56+
font-size: 1.4rem;
57+
line-height: 1.5;
58+
}
59+
60+
/* Styling for the support banner */
61+
.support {
62+
border-radius: 0;
63+
border: 6px dashed black;
64+
background-color: #fef0c3;
65+
font-size: 1.3rem;
66+
padding: 1rem;
67+
position: absolute;
68+
inset: 25%;
69+
display: --supports();
70+
}

‎css-custom-functions/gradient-function/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Color adjust functions</title>
6+
<link href="style.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<p class="support">
10+
⚠️ Your browser doesn't currently support
11+
<a href="https://drafts.csswg.org/css-mixins-1/#defining-custom-functions"
12+
>CSS custom functions</a
13+
>.
14+
</p>
15+
<section id="one">
16+
<h2>Gradient generator function</h2>
17+
<p>
18+
This example includes a function that defines a specific background
19+
repeating radial gradient. It is useful because it defines the complex
20+
code in one place, and then allows you to create a background of this
21+
type wherever needed with a function call that just requires you to
22+
specify some arguments to define the size and color.
23+
</p>
24+
</section>
25+
<section id="two"></section>
26+
<section id="three"></section>
27+
</body>
28+
</html>

‎css-custom-functions/gradient-function/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/* CSS gradient code adapted from the Shippo pattern in Lea Verou's
2+
CSS3 patterns gallery: https://projects.verou.me/css3patterns/#shippo */
3+
@function --shippo-pattern(--size <length>, --tint <color>) {
4+
result: radial-gradient(closest-side, transparent 98%, rgba(0 0 0 / 0.3) 99%)
5+
0 0 / var(--size) var(--size),
6+
radial-gradient(closest-side, transparent 98%, rgba(0 0 0 / 0.3) 99%)
7+
calc(var(--size) / 2) calc(var(--size) / 2) / var(--size) var(--size)
8+
var(--tint);
9+
}
10+
11+
/* Function that returns a value of none to hide a "not supported" banner
12+
if CSS custom functions are supported. If not, the banner will show. */
13+
@function --supports() {
14+
result: none;
15+
}
16+
17+
* {
18+
box-sizing: border-box;
19+
}
20+
21+
html {
22+
font-family: system-ui;
23+
height: 100%;
24+
}
25+
26+
body {
27+
margin: 0;
28+
padding: 20px;
29+
height: inherit;
30+
display: flex;
31+
gap: 20px;
32+
}
33+
34+
section {
35+
border-radius: 20px;
36+
flex: 1;
37+
padding: 0 20px;
38+
border: 1px solid black;
39+
}
40+
41+
h2,
42+
p {
43+
padding: 0.5rem;
44+
border-radius: 10px;
45+
background-color: rgb(255 255 255 / 80%);
46+
}
47+
h2 {
48+
font-size: 1.5rem;
49+
}
50+
51+
p {
52+
font-size: 1.1rem;
53+
line-height: 1.5;
54+
}
55+
56+
#one {
57+
background: --shippo-pattern(100px, #def);
58+
}
59+
60+
#two {
61+
background: --shippo-pattern(3.5rem, lime);
62+
}
63+
64+
#three {
65+
background: --shippo-pattern(10vw, purple);
66+
}
67+
68+
/* Styling for the support banner */
69+
.support {
70+
border-radius: 0;
71+
border: 6px dashed black;
72+
background-color: #fef0c3;
73+
font-size: 1.3rem;
74+
padding: 1rem;
75+
position: absolute;
76+
inset: 25%;
77+
display: --supports();
78+
}

‎css-custom-functions/responsive-narrow-wide/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Responsive narrow-wide function</title>
6+
<link href="style.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<p class="support">
10+
⚠️ Your browser doesn't currently support
11+
<a href="https://drafts.csswg.org/css-mixins-1/#defining-custom-functions"
12+
>CSS custom functions</a
13+
>.
14+
</p>
15+
<section>
16+
<h2>Responsive narrow-wide function</h2>
17+
<p>
18+
This example features a custom CSS function called
19+
<code>--narrow-wide()</code>, which takes two parameters — a value to
20+
apply to a narrow layout and a value to apply to a wide layout.
21+
</p>
22+
</section>
23+
<section>
24+
<h2>Usage</h2>
25+
<p>
26+
The custom function is very useful — you can use it as the value of just
27+
about any property where you want to provide a choice of values — one
28+
for a narrow layout and one for a wide layout.
29+
</p>
30+
</section>
31+
<section>
32+
<h2>Defining the function</h2>
33+
<p>
34+
The <code>--narrow-wide()</code> function is built using two CSS custom
35+
properties and a media query to detect whether the viewport is narrower
36+
or wider than the provided breakpoint, and return one value or the other
37+
as appropriate.
38+
</p>
39+
</section>
40+
</body>
41+
</html>

‎css-custom-functions/responsive-narrow-wide/style.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@function --narrow-wide(--narrow, --wide) {
2+
result: var(--wide);
3+
@media (width < 700px) {
4+
result: var(--narrow);
5+
}
6+
}
7+
8+
/*
9+
This could also be written using a CSS if() function, like so:
10+
@function --narrow-wide(--narrow, --wide) {
11+
result: if(media(width < 700px): var(--narrow) ; else: var(--wide));
12+
}
13+
*/
14+
15+
/* Function that returns a value of none to hide a "not supported" banner
16+
if CSS custom functions are supported. If not, the banner will show. */
17+
@function --supports() {
18+
result: none;
19+
}
20+
21+
html {
22+
font-family: system-ui;
23+
}
24+
25+
body {
26+
display: grid;
27+
grid-template-columns: repeat(--narrow-wide(1, 3), 1fr);
28+
gap: --narrow-wide(0, 20px);
29+
padding: 0 20px;
30+
}
31+
32+
h2 {
33+
font-size: --narrow-wide(2.5rem, 2rem);
34+
}
35+
36+
p {
37+
font-size: --narrow-wide(1.4rem, 1rem);
38+
line-height: 1.5;
39+
}
40+
41+
/* Styling for the support banner */
42+
.support {
43+
border-radius: 0;
44+
border: 6px dashed black;
45+
background-color: #fef0c3;
46+
font-size: 1.3rem;
47+
padding: 1rem;
48+
position: absolute;
49+
inset: 25%;
50+
display: --supports();
51+
}

0 commit comments

Comments
 (0)