Masque CSS Tailwind uniquement CSS pour découper des images en formes : cercle, cercle, cœur, hexagone, etc. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Les composants de masque appliquent des formes géométriques ou personnalisées aux images et aux éléments, créant ainsi un intérêt visuel et des designs uniques. Construits avec les propriétés de masque CSS, les masques permettent un cadrage d'image créatif et un style décoratif. Le système de masques Frutjam prend en charge plusieurs formes, idéales pour les cadres d'avatar, les présentations de galeries et les mises en page artistiques.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| mask | Base | Clipse l'élément en une forme de masque CSS |
| mask-circle | Style | Masque circulaire |
| mask-squircle | Style | Masque Squircle (carré arrondi) |
| mask-heart | Style | Masque en forme de coeur |
| mask-hexagon | Style | Masque en forme d'hexagone |
| mask-pentagon | Style | Masque en forme de Pentagone |
| mask-diamond | Style | Masque en forme de diamant |
| mask-star | Style | Masque étoile à cinq branches |
| mask-star-2 | Style | Masque étoile à six branches |
| mask-triangle | Style | Masque en forme de triangle |
| mask-half-1 | Modificateur | Moitié gauche de la forme (pour les masques divisés) |
| mask-half-2 | Modificateur | Moitié droite de la forme (pour les masques divisés) |
Utilisation de base
Créez un masque circulaire simple avec un arrière-plan dégradé.
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> |
Formes de masque
Appliquez différentes formes géométriques aux éléments du masque.
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> |
Tailles de masque
Appliquez des masques de différentes tailles pour des options de mise en page flexibles.
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> |
Masque avec différents dégradés
Combinez des masques avec différentes directions et couleurs de dégradé.
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> |
Masque aux couleurs unies
Appliquez des masques avec des couleurs d'arrière-plan unies pour des designs simples.
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> |
Variantes combinées
Mélangez différentes formes, tailles et couleurs dans les dispositions de masques.
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> |
Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?
Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Masque sur demande. Fini les cours hallucinés.