Nur CSS-Tailwind-CSS-Maske zum Zuschneiden von Bildern in Formen – Kreis, Kreis, Herz, Sechseck und mehr. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Maskenkomponenten wenden geometrische oder benutzerdefinierte Formen auf Bilder und Elemente an und sorgen so für visuelles Interesse und einzigartige Designs. Mit CSS-Maskeneigenschaften erstellte Masken ermöglichen kreative Bildrahmen und dekorative Gestaltung. Das Frutjam-Maskensystem unterstützt mehrere Formen – ideal für Avatar-Rahmen, Galeriepräsentationen und künstlerische Layouts.
Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
| Klasse | Typ | Beschreibung |
|---|---|---|
| mask | Base | Befestigt das Element an einer CSS-Maskenform |
| mask-circle | Stil | Kreisförmige Maske |
| mask-squircle | Stil | Squircle-Maske (abgerundetes Quadrat). |
| mask-heart | Stil | Herzförmige Maske |
| mask-hexagon | Stil | Sechseckige Maske |
| mask-pentagon | Stil | Fünfeckige Maske |
| mask-diamond | Stil | Rautenförmige Maske |
| mask-star | Stil | Fünfzackige Sternmaske |
| mask-star-2 | Stil | Sechszackige Sternmaske |
| mask-triangle | Stil | Dreieckige Maske |
| mask-half-1 | Modifikator | Linke Hälfte der Form (für geteilte Masken) |
| mask-half-2 | Modifikator | Rechte Hälfte der Form (für geteilte Masken) |
Grundlegende Verwendung
Erstellen Sie eine einfache kreisförmige Maske mit einem Hintergrund mit Farbverlauf.
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> |
Maskenformen
Wenden Sie verschiedene geometrische Formen auf Maskenelemente an.
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> |
Maskengrößen
Wenden Sie Masken in verschiedenen Größen an, um flexible Layoutoptionen zu erhalten.
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> |
Maske mit unterschiedlichen Farbverläufen
Kombinieren Sie Masken mit verschiedenen Verlaufsrichtungen und Farben.
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> |
Maske mit Volltonfarben
Wenden Sie für einfache Designs Masken mit einfarbigen Hintergrundfarben an.
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> |
Kombinierte Varianten
Mischen Sie verschiedene Formen, Größen und Farben in Maskenlayouts.
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> |
Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?
Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Maske-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.