Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

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.

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
maskTemelÖğeyi bir CSS maskesi şekline klipsler
mask-circleStilDairesel maske
mask-squircleStilSincap (yuvarlak kare) maskesi
mask-heartStilKalp şekli maskesi
mask-hexagonStilAltıgen şekilli maske
mask-pentagonStilBeşgen şekilli maske
mask-diamondStilElmas şekli maskesi
mask-starStilBeş köşeli yıldız maskesi
mask-star-2StilAltı köşeli yıldız maskesi
mask-triangleStilÜçgen şekli maskesi
mask-half-1DeğiştiriciŞeklin sol yarısı (bölünmüş maskeler için)
mask-half-2Değ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.

html 
 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.

html 
 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.

html 
 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.

html 
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.

html 
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>