Skip to content

Commit 56bd613

Browse files
nguyencongphapnguyencongphap
committed
Issue tailwindlabs#2194 Aligned dashed circle borders with masked images
1 parent 35d363c commit 56bd613

File tree

1 file changed

+20
-12
lines changed

1 file changed

+20
-12
lines changed

‎src/docs/mask-composite.mdx

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,36 @@ Use utilities like `mask-add` and `mask-intersect` to control how an element's m
2727
{
2828
<div className="grid grid-cols-2 items-center justify-center justify-items-center gap-y-8 py-4 text-center font-mono text-xs font-medium text-gray-500 max-sm:grid-cols-1 dark:text-gray-400">
2929
<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" />
3230
<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>
31+
<div className="relative mx-auto w-48">
32+
<div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
33+
<div className="absolute top-1/2 left-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
34+
<div className="h-24 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>
35+
</div>
3436
</div>
3537
<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" />
3838
<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>
39+
<div className="relative mx-auto w-48">
40+
<div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
41+
<div className="absolute top-1/2 left-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
42+
<div className="h-24 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>
43+
</div>
4044
</div>
4145
<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" />
4446
<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>
47+
<div className="relative mx-auto w-48">
48+
<div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
49+
<div className="absolute top-1/2 left-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
50+
<div className="h-24 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>
51+
</div>
4652
</div>
4753
<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" />
5054
<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>
55+
<div className="relative mx-auto w-48">
56+
<div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
57+
<div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
58+
<div className="h-24 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>
59+
</div>
5260
</div>
5361
</div>
5462
}

0 commit comments

Comments
 (0)