Patterns
Cross Dots v1.0.8
Utilities for sets an element's background cross-dots pattern.
Class
class | css | |
---|---|---|
pattern cross-dots-sm | background-image: radial-gradient(currentColor 5px, transparent 5px), radial-gradient(currentColor 5px, transparent 5px); background-size: calc(20 * 5px) calc(20 * 5px); background-position: 0 0, calc(10 * 5px) calc(10 * 5px) | |
pattern cross-dots-md | background-image: radial-gradient(currentColor 1px, transparent 1px), radial-gradient(currentColor 1px, transparent 1px); background-size: calc(20 * 1px) calc(20 * 1px); background-position: 0 0, calc(10 * 1px) calc(10 * 1px) | |
pattern cross-dots-lg | background-image: radial-gradient(currentColor 1.5px, transparent 1.5px), radial-gradient(currentColor 1.5px, transparent 1.5px); background-size: calc(20 * 1.5px) calc(20 * 1.5px); background-position: 0 0, calc(10 * 1.5px) calc(10 * 1.5px) | |
pattern cross-dots-xl | background-image: radial-gradient(currentColor 2px, transparent 2px), radial-gradient(currentColor 2px, transparent 2px); background-size: calc(20 * 2px) calc(20 * 2px); background-position: 0 0, calc(10 * 2px) calc(10 * 2px) |
Usage
Set basic cross-dots pattern.
<!-- Example -->
<y class="pattern cross-dots-sm ... h-32 w-full">
...
</y>
Set pattern with color by using text-{color}
utility. (See Text Color).
<!-- Example -->
<y class="pattern cross-dots-sm text-amber-400 ... h-32 w-full">
...
</y>
Set pattern clipping with text.
<!-- Example -->
<y class="pattern cross-dots-sm clip-text text-red-500">
<y>
TEXT
</y>
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |