Görüntüleri daire, sincap, kalp, altıgen ve daha fazlası gibi şekillere kırpmak için yalnızca CSS'ye özel Tailwind CSS maskesi. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Maske bileşenleri görüntülere ve öğelere geometrik veya özel şekiller uygulayarak görsel ilgi ve benzersiz tasarımlar yaratır. CSS maskesi özellikleriyle oluşturulan maskeler, yaratıcı görüntü çerçeveleme ve dekoratif stil oluşturma olanağı sağlar. Frutjam maske sistemi birden fazla şekli destekler; avatar çerçeveleri, galeri sunumları ve sanatsal düzenler için idealdir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| mask | Temel | Öğeyi bir CSS maskesi şekline klipsler |
| mask-circle | Stil | Dairesel maske |
| mask-squircle | Stil | Sincap (yuvarlak kare) maskesi |
| mask-heart | Stil | Kalp şekli maskesi |
| mask-hexagon | Stil | Altıgen şekilli maske |
| mask-pentagon | Stil | Beşgen şekilli maske |
| mask-diamond | Stil | Elmas şekli maskesi |
| mask-star | Stil | Beş köşeli yıldız maskesi |
| mask-star-2 | Stil | Altı köşeli yıldız maskesi |
| mask-triangle | Stil | Üçgen şekli maskesi |
| mask-half-1 | Değiştirici | Şeklin sol yarısı (bölünmüş maskeler için) |
| mask-half-2 | Değiştirici | Şeklin sağ yarısı (bölünmüş maskeler için) |
Temel Kullanım
Degrade arka plana sahip basit bir dairesel maske oluşturun.
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> |
Maske Şekilleri
Maske elemanlarına farklı geometrik şekiller uygulayın.
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> |
Maske Boyutları
Esnek düzen seçenekleri için farklı boyutlarda maskeler uygulayın.
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> |
Farklı Degradelere Sahip Maske
Maskeleri çeşitli degrade yönleri ve renklerle birleştirin.
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> |
Düz Renklerle Maske
Basit tasarımlar için düz arka plan renklerine sahip maskeler uygulayın.
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> |
Kombine Varyantlar
Maske düzenlerinde farklı şekilleri, boyutları ve renkleri karıştırın.
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> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam Maske sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.