Skip to content

Commit f0163cc

Browse files
danhollickreinink
danhollick
authored and
reinink
committed
example fixes
1 parent fe4027b commit f0163cc

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

‎src/docs/mask-image.mdx

+18-18
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ Use the `mask-[<value>]` syntax to set the mask image of an element:
486486
border
487487
className="relative mx-auto flex h-48 w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
488488
>
489-
<div className="mask-size-[110%_90%] h-full w-full 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-image:url(/mask.png)] bg-cover bg-center bg-no-repeat mask-center mask-no-repeat"></div>
489+
<div className="h-full w-full 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-image:url(/mask.png)] bg-cover bg-center bg-no-repeat mask-size-[110%_90%] mask-center mask-no-repeat"></div>
490490
</Stripes>
491491

492492
}
@@ -513,27 +513,27 @@ Use utilities like `mask-b-from-<value>` and `mask-t-to-<value>` to add a linear
513513
<div className="grid grid-cols-2 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-sm font-medium text-gray-500 max-sm:justify-between max-sm:px-2 dark:text-gray-400">
514514
<div className="flex flex-col items-center text-xs">
515515
<p>mask-t-from-50%</p>
516-
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-3" border>
516+
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
517517
<div className="h-full rounded-lg 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-t-from-50% bg-cover bg-center mask-no-repeat"></div>
518518
</Stripes>
519519
</div>
520520
<div className="flex flex-col items-center text-xs">
521521
<p>mask-r-from-30%</p>
522-
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-3" border>
523-
<div className="mask-r-from-white h-full rounded-lg 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-r-from-30% bg-cover bg-center mask-no-repeat"></div>
522+
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
523+
<div className="h-full rounded-lg 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-r-from-white mask-r-from-30% bg-cover bg-center mask-no-repeat"></div>
524524
</Stripes>
525525
</div>
526526
<div className="flex flex-col items-center text-xs">
527527
<p>mask-l-from-50%</p>
528528
<p>mask-l-to-90%</p>
529-
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-3" border>
529+
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
530530
<div className="h-full rounded-lg 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-l-from-50% mask-l-to-90% bg-cover bg-center mask-no-repeat"></div>
531531
</Stripes>
532532
</div>
533533
<div className="flex flex-col items-center text-xs">
534534
<p>mask-b-from-20%</p>
535535
<p>mask-b-to-80%</p>
536-
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-3" border>
536+
<Stripes className="mt-3 aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
537537
<div className="h-full rounded-lg 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-b-from-20% mask-b-to-80% bg-cover bg-center mask-no-repeat"></div>
538538
</Stripes>
539539
</div>
@@ -795,9 +795,9 @@ Use the `mask-radial-from-<value>` and `mask-radial-to-<value>` utilities to add
795795
<div class="flex items-center gap-4">
796796
<img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" />
797797
<div class="font-medium">
798-
<p className="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
799-
<p className="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
800-
<p className="mt-1 text-sm leading-relaxed text-balance text-gray-500">
798+
<p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
799+
<p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
800+
<p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
801801
Work faster than ever with customizable keyboard shortcuts
802802
</p>
803803
</div>
@@ -909,25 +909,25 @@ Use utilities like `mask-radial-closest-corner` and `mask-radial-farthest-side`
909909
<div className="grid grid-cols-2 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-sm font-medium text-gray-500 max-sm:justify-between max-sm:px-2 dark:text-gray-400">
910910
<div className="flex flex-col items-center">
911911
<p className="mb-3 text-xs">mask-radial-closest-side</p>
912-
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
912+
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-322" border>
913913
<div className="h-full rounded-lg 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-from-100% mask-radial-closest-side mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
914914
</Stripes>
915915
</div>
916916
<div className="flex flex-col items-center">
917917
<p className="mb-3 text-xs">mask-radial-closest-corner</p>
918-
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
918+
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-322" border>
919919
<div className="h-full rounded-lg 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-from-100% mask-radial-closest-corner mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
920920
</Stripes>
921921
</div>
922922
<div className="flex flex-col items-center">
923923
<p className="mb-3 text-xs">mask-radial-farthest-side</p>
924-
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
924+
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-322" border>
925925
<div className="h-full rounded-lg 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-from-100% mask-radial-farthest-side mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
926926
</Stripes>
927927
</div>
928928
<div className="flex flex-col items-center">
929929
<p className="mb-3 text-xs">mask-radial-farthest-corner</p>
930-
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-32" border>
930+
<Stripes className="aspect-[1.33] w-40 rounded-lg max-sm:w-322" border>
931931
<div className="h-full rounded-lg 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-from-100% mask-radial-farthest-corner mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
932932
</Stripes>
933933
</div>
@@ -1007,23 +1007,23 @@ Gradient mask utilities, like `mask-radial-from-<value>`, `mask-conic-to-<value>
10071007

10081008
<div className="grid grid-cols-2 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-sm font-medium text-gray-500 max-sm:justify-between max-sm:px-2 dark:text-gray-400">
10091009
<div className="flex flex-col items-center text-xs">
1010-
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-3" border>
1010+
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-32" border>
10111011
<div className="h-full rounded-lg 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-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% mask-circle mask-radial-at-top-left bg-cover bg-center mask-no-repeat"></div>
10121012
</Stripes>
10131013
</div>
10141014
<div className="flex flex-col items-center text-xs">
1015-
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-3" border>
1015+
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-32" border>
10161016
<div className="h-full rounded-lg 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-y-from-80% mask-x-from-80% bg-cover bg-center mask-no-repeat"></div>
10171017
</Stripes>
10181018
</div>
10191019
<div className="flex flex-col items-center text-xs">
1020-
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-3" border>
1020+
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-32" border>
10211021
<div className="h-full rounded-lg 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-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% mask-radial-at-bottom bg-cover bg-center mask-no-repeat"></div>
10221022
</Stripes>
10231023
</div>
10241024
<div className="flex flex-col items-center text-xs">
1025-
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-3" border>
1026-
<div className="mask-size-[2.5%_3.25%] h-full rounded-lg 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-t-from-80% mask-t-to-80% mask-r-from-80% mask-r-to-80% mask-conic-305 mask-conic-from-50% mask-conic-to-50% bg-cover bg-center"></div>
1025+
<Stripes className="aspect-[1.33] w-48 rounded-lg max-sm:w-32" border>
1026+
<div className="h-full rounded-lg 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-t-from-80% mask-t-to-80% mask-r-from-80% mask-r-to-80% mask-conic-305 mask-conic-from-50% mask-conic-to-50% bg-cover bg-center mask-size-[2.5%_3.25%]"></div>
10271027
</Stripes>
10281028
</div>
10291029
</div>

0 commit comments

Comments
 (0)