Mask Component
CSS-only Tailwind CSS mask for clipping images into shapes — circle, squircle, heart, hexagon, and more. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Komponenty maski nakładają geometryczne lub niestandardowe kształty na obrazy i elementy, tworząc atrakcyjne wizualnie i niepowtarzalne projekty. Zbudowane na podstawie właściwości masek CSS, maski umożliwiają kreatywne kadrowanie obrazu i dekoracyjną stylizację. System masek Frutjam obsługuje wiele kształtów — idealnie nadaje się do ramek awatarów, prezentacji w galeriach i układów artystycznych.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| mask | Opierać | Przycina element do kształtu maski CSS |
| mask-circle | Styl | Okrągła maska |
| mask-squircle | Styl | Maska Squircle (zaokrąglony kwadrat). |
| mask-heart | Styl | Maska w kształcie serca |
| mask-hexagon | Styl | Maska w kształcie sześciokąta |
| mask-pentagon | Styl | Maska w kształcie pięciokąta |
| mask-diamond | Styl | Maska w kształcie rombu |
| mask-star | Styl | Maska z pięcioramienną gwiazdą |
| mask-star-2 | Styl | Maska z sześcioramienną gwiazdą |
| mask-triangle | Styl | Maska w kształcie trójkąta |
| mask-half-1 | Modyfikator | Lewa połowa kształtu (dla masek dzielonych) |
| mask-half-2 | Modyfikator | Prawa połowa kształtu (dla masek dzielonych) |
Podstawowe użycie
Utwórz prostą okrągłą maskę z gradientowym tłem.
1 2 3 | <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
1 2 3 | <div className="mask mask-circle h-24 w-24"> <div className="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
Kształty masek
Zastosuj różne kształty geometryczne do elementów maski.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-squircle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-hexagon h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-squircle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
Rozmiary masek
Zastosuj maski w różnych rozmiarach, aby uzyskać elastyczne opcje układu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-16 w-16"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-48 w-48"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
Maska z różnymi gradientami
Łącz maski z różnymi kierunkami gradientu i kolorami.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-b from-primary to-accent"></div> </div> <div class="mask mask-hexagon h-32 w-32"> <div class="w-full h-full bg-linear-to-r from-secondary to-primary"></div> </div> <div class="mask mask-squircle h-32 w-32"> <div class="w-full h-full bg-linear-to-t from-error to-warning"></div> </div> <div class="mask mask-squircle h-32 w-32"> <div class="w-full h-full bg-linear-to-l from-success to-info"></div> </div> |
Maska w jednolitych kolorach
W przypadku prostych projektów stosuj maski z jednolitymi kolorami tła.
1 2 3 4 | <div class="mask mask-circle h-24 w-24 bg-primary"></div> <div class="mask mask-squircle h-24 w-24 bg-secondary"></div> <div class="mask mask-hexagon h-24 w-24 bg-accent"></div> <div class="mask mask-squircle h-24 w-24 bg-info"></div> |
Połączone warianty
Mieszaj różne kształty, rozmiary i kolory w układach masek.
1 2 3 4 5 6 7 | <div class="mask mask-hexagon h-48 w-48 bg-linear-to-r from-primary to-secondary"></div> <div class="mask mask-squircle h-40 w-40 bg-linear-to-br from-accent to-info"></div> <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-t from-success to-warning"></div> </div> |