Skip to content

Commit 4acdcad

Browse files
danhollickreinink
danhollick
and
reinink
authored
Document mask-* utilities (#2161)
Note: this is using a custom build of Tailwind that we'll need to remove before merging. --------- Co-authored-by: Jonathan Reinink <[email protected]>
1 parent 4882bc1 commit 4acdcad

16 files changed

+1892
-61
lines changed

‎public/keyboard-dark.png

300 KB
Loading

‎public/keyboard-light.png

254 KB
Loading

‎public/mask.png

46.5 KB
Loading

‎src/app/(docs)/docs/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,15 @@ export default {
134134
["opacity", "/docs/opacity"],
135135
["mix-blend-mode", "/docs/mix-blend-mode"],
136136
["background-blend-mode", "/docs/background-blend-mode"],
137+
["mask-clip", "/docs/mask-clip"],
138+
["mask-composite", "/docs/mask-composite"],
139+
["mask-image", "/docs/mask-image"],
140+
["mask-mode", "/docs/mask-mode"],
141+
["mask-origin", "/docs/mask-origin"],
142+
["mask-position", "/docs/mask-position"],
143+
["mask-repeat", "/docs/mask-repeat"],
144+
["mask-size", "/docs/mask-size"],
145+
["mask-type", "/docs/mask-type"],
137146
] as const,
138147
Filters: [
139148
[

‎src/docs/mask-clip.mdx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { ApiTable } from "@/components/api-table.tsx";
2+
import { Example } from "@/components/example.tsx";
3+
import { Figure } from "@/components/figure.tsx";
4+
import { ResponsiveDesign } from "@/components/content.tsx";
5+
6+
export const title = "mask-clip";
7+
export const description = "Utilities for controlling the bounding box of an element's mask.";
8+
9+
<ApiTable
10+
rows={[
11+
["mask-clip-border", "mask-clip: border-box;"],
12+
["mask-clip-padding", "mask-clip: padding-box;"],
13+
["mask-clip-content", "mask-clip: content-box;"],
14+
["mask-clip-fill", "mask-clip: fill-box;"],
15+
["mask-clip-stroke", "mask-clip: stroke-box;"],
16+
["mask-clip-view", "mask-clip: view-box;"],
17+
["mask-no-clip", "mask-clip: no-clip;"],
18+
]}
19+
/>
20+
21+
## Examples
22+
23+
### Basic example
24+
25+
Use utilities like `mask-clip-border`, `mask-clip-padding`, and `mask-clip-content` to control the bounding box of an element's mask:
26+
27+
<Figure>
28+
29+
<Example>
30+
{
31+
<div className="flex flex-col items-center justify-center gap-y-10 text-center font-mono text-sm font-medium text-gray-500 sm:flex-row sm:space-y-0 sm:space-x-10 dark:text-gray-400">
32+
<div className="flex flex-col items-center">
33+
<p className="mb-3">mask-clip-border</p>
34+
<div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
35+
<div className="absolute -inset-[3px] bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-border p-1.5"></div>
36+
</div>
37+
</div>
38+
<div className="flex flex-col items-center">
39+
<p className="mb-3">mask-clip-padding</p>
40+
<div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
41+
<div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-padding p-1.5"></div>
42+
</div>
43+
</div>
44+
<div className="flex flex-col items-center">
45+
<p className="mb-3">mask-clip-content</p>
46+
<div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75">
47+
<div className="absolute -inset-[3px] rounded-lg border-3 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-clip-content p-1.5"></div>
48+
</div>
49+
</div>
50+
</div>
51+
}
52+
</Example>
53+
54+
{/* prettier-ignore */}
55+
```html
56+
<!-- [!code classes:mask-clip-border,mask-clip-padding,mask-clip-content] -->
57+
<div class="mask-clip-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
58+
<div class="mask-clip-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
59+
<div class="mask-clip-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>
60+
```
61+
62+
</Figure>
63+
64+
### Responsive design
65+
66+
<ResponsiveDesign property="mask-clip" defaultClass="mask-clip-border" featuredClass="mask-clip-padding" />

‎src/docs/mask-composite.mdx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { ApiTable } from "@/components/api-table.tsx";
2+
import { Example } from "@/components/example.tsx";
3+
import { Figure } from "@/components/figure.tsx";
4+
import { ResponsiveDesign } from "@/components/content.tsx";
5+
6+
export const title = "mask-composite";
7+
export const description = "Utilities for controlling how multiple masks are combined together.";
8+
9+
<ApiTable
10+
rows={[
11+
["mask-add", "mask-composite: add;"],
12+
["mask-subtract", "mask-composite: subtract;"],
13+
["mask-intersect", "mask-composite: intersect;"],
14+
["mask-exclude", "mask-composite: exclude;"],
15+
]}
16+
/>
17+
18+
## Examples
19+
20+
### Basic example
21+
22+
Use utilities like `mask-add` and `mask-intersect` to control how an element's masks are combined together:
23+
24+
<Figure>
25+
26+
<Example>
27+
{
28+
<div className="grid grid-cols-2 items-center justify-center justify-items-center gap-y-8 py-4 text-center font-mono text-sm font-medium text-gray-500 max-sm:grid-cols-1 dark:text-gray-400">
29+
<div className="relative grid justify-center">
30+
<div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
31+
<div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
32+
<p className="mb-3">mask-add</p>
33+
<div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-add"></div>
34+
</div>
35+
<div className="relative grid justify-center">
36+
<div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
37+
<div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
38+
<p className="mb-3 text-center">mask-subtract</p>
39+
<div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-subtract"></div>
40+
</div>
41+
<div className="relative grid justify-center">
42+
<div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
43+
<div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
44+
<p className="mb-3 text-center">mask-intersect</p>
45+
<div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-intersect"></div>
46+
</div>
47+
<div className="relative grid justify-center">
48+
<div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
49+
<div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
50+
<p className="mb-3 text-center">mask-exclude</p>
51+
<div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-exclude"></div>
52+
</div>
53+
</div>
54+
}
55+
</Example>
56+
57+
{/* prettier-ignore */}
58+
```html
59+
<!-- [!code classes:mask-add,mask-subtract,mask-intersect,mask-exclude] -->
60+
<div class="mask-add mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
61+
<div class="mask-subtract mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
62+
<div class="mask-intersect mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
63+
<div class="mask-exclude mask-[url(/img/circle.png),url(/img/circle.png)] mask-[position:30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]"></div>
64+
```
65+
66+
</Figure>
67+
68+
### Responsive design
69+
70+
<ResponsiveDesign property="mask-composite" defaultClass="mask-add" featuredClass="mask-subtract" />

0 commit comments

Comments
 (0)