Chuyển đến nội dung chính
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.

Các thành phần mặt nạ áp dụng các hình dạng hình học hoặc tùy chỉnh cho hình ảnh và thành phần, tạo ra sự thú vị trực quan và thiết kế độc đáo. Được xây dựng với các thuộc tính mặt nạ CSS, mặt nạ cho phép tạo khung hình ảnh sáng tạo và tạo kiểu trang trí. Hệ thống mặt nạ Frutjam hỗ trợ nhiều hình dạng—lý tưởng cho khung hình đại diện, bản trình bày thư viện và bố cục nghệ thuật.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
maskCăn cứCắt phần tử thành hình dạng mặt nạ CSS
mask-circlePhong cáchMặt nạ tròn
mask-squirclePhong cáchMặt nạ hình tròn (vuông tròn)
mask-heartPhong cáchMặt nạ hình trái tim
mask-hexagonPhong cáchMặt nạ hình lục giác
mask-pentagonPhong cáchMặt nạ hình ngũ giác
mask-diamondPhong cáchMặt nạ hình kim cương
mask-starPhong cáchMặt nạ ngôi sao năm cánh
mask-star-2Phong cáchMặt nạ ngôi sao sáu cánh
mask-trianglePhong cáchMặt nạ hình tam giác
mask-half-1Công cụ sửa đổiNửa bên trái của hình (đối với mặt nạ chia đôi)
mask-half-2Công cụ sửa đổiNửa bên phải của hình dạng (đối với mặt nạ chia đôi)

Cách sử dụng cơ bản

Tạo một mặt nạ hình tròn đơn giản với nền gradient.

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>

Hình dạng mặt nạ

Áp dụng các hình dạng hình học khác nhau cho các phần tử mặt 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>

Kích cỡ mặt nạ

Áp dụng mặt nạ ở các kích cỡ khác nhau để có các tùy chọn bố cục linh hoạt.

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>

Mặt nạ với các độ chuyển màu khác nhau

Kết hợp các mặt nạ với nhiều hướng và màu sắc gradient khác nhau.

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>

Mặt nạ có màu đặc

Áp dụng mặt nạ có màu nền đồng nhất cho các thiết kế đơn giả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>

Combined Variants

Trộn các hình dạng, kích thước và màu sắc khác nhau trong bố cục mặt 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>