Tailwind CSS mask khusus CSS untuk memotong gambar menjadi bentuk — lingkaran, tupai, hati, segi enam, dan banyak lagi. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Komponen topeng menerapkan bentuk geometris atau khusus pada gambar dan elemen, menciptakan daya tarik visual dan desain unik. Dibuat dengan properti masker CSS, masker memungkinkan pembingkaian gambar kreatif dan gaya dekoratif. Sistem topeng Frutjam mendukung berbagai bentuk—ideal untuk bingkai avatar, presentasi galeri, dan tata letak artistik.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
|---|---|---|
| mask | Basis | Klip elemen ke bentuk topeng CSS |
| mask-circle | Gaya | Masker melingkar |
| mask-squircle | Gaya | Topeng tupai (persegi bulat). |
| mask-heart | Gaya | Masker bentuk hati |
| mask-hexagon | Gaya | Masker bentuk segi enam |
| mask-pentagon | Gaya | Masker bentuk pentagon |
| mask-diamond | Gaya | Masker bentuk berlian |
| mask-star | Gaya | Topeng bintang berujung lima |
| mask-star-2 | Gaya | Topeng bintang berujung enam |
| mask-triangle | Gaya | Masker bentuk segitiga |
| mask-half-1 | Pengubah | Setengah bagian kiri bentuk (untuk masker terbelah) |
| mask-half-2 | Pengubah | Setengah bagian kanan bentuk (untuk masker terbelah) |
Penggunaan Dasar
Buat topeng melingkar sederhana dengan latar belakang gradien.
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> |
Bentuk Topeng
Terapkan bentuk geometris yang berbeda untuk menutupi elemen.
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> |
Ukuran Masker
Terapkan masker dengan ukuran berbeda untuk opsi tata letak yang fleksibel.
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> |
Topeng dengan Gradien Berbeda
Kombinasikan masker dengan berbagai arah gradien dan warna.
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> |
Masker dengan Warna Solid
Terapkan masker dengan warna latar belakang solid untuk desain sederhana.
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> |
Varian Gabungan
Campurkan berbagai bentuk, ukuran, dan warna dalam tata letak topeng.
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> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP memberi editor AI Anda nama dan struktur kelas Masker yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.