이미지를 원, 물결 모양, 하트, 육각형 등의 모양으로 자르기 위한 CSS 전용 Tailwind CSS 마스크입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
마스크 구성 요소는 이미지와 요소에 기하학적 모양이나 사용자 정의 모양을 적용하여 시각적인 흥미와 독특한 디자인을 만들어냅니다. CSS 마스크 속성으로 구축된 마스크를 사용하면 창의적인 이미지 프레이밍과 장식적인 스타일을 구현할 수 있습니다. Frutjam 마스크 시스템은 다양한 모양을 지원하므로 아바타 프레임, 갤러리 프리젠테이션 및 예술적 레이아웃에 이상적입니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| mask | 베이스 | 요소를 CSS 마스크 모양으로 자릅니다. |
| mask-circle | 스타일 | 원형 마스크 |
| mask-squircle | 스타일 | Squircle(둥근 사각형) 마스크 |
| mask-heart | 스타일 | 하트 모양 마스크 |
| mask-hexagon | 스타일 | 육각형 마스크 |
| mask-pentagon | 스타일 | 오각형 모양의 마스크 |
| mask-diamond | 스타일 | 다이아몬드 모양 마스크 |
| mask-star | 스타일 | 다섯개 별 마스크 |
| mask-star-2 | 스타일 | 여섯개 별 마스크 |
| mask-triangle | 스타일 | 삼각형 모양의 마스크 |
| mask-half-1 | 수정자 | 모양의 왼쪽 절반(분할 마스크의 경우) |
| mask-half-2 | 수정자 | 모양의 오른쪽 절반(분할 마스크의 경우) |
기본 사용법
그라데이션 배경을 사용하여 간단한 원형 마스크를 만듭니다.
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> |
마스크 모양
마스크 요소에 다양한 기하학적 모양을 적용합니다.
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> |
마스크 크기
유연한 레이아웃 옵션을 위해 다양한 크기로 마스크를 적용합니다.
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> |
다양한 그라데이션을 사용한 마스크
다양한 그라데이션 방향과 색상으로 마스크를 결합합니다.
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> |
단색 마스크
심플한 디자인에는 단색 배경색의 마스크를 적용하세요.
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> |
결합된 변형
마스크 레이아웃에 다양한 모양, 크기 및 색상을 혼합합니다.
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> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 마스크 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.