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