Squircle Image Masks
Quatre portraits de 90 px masqués en superellipse n = 4 qui, au survol, se resserrent réellement vers n = 5 en 0,6 s (deux clip-path: polygon() de 64 points que le navigateur interpole), pendant qu'un anneau de couleur et le prénom apparaissent : une équipe présentée sans légende sous chaque visage.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque .sq-mask (90 × 90 px) contient une image .sq-mask__img — dans le code vendu, un portrait SVG de remplacement : fond en dégradé, tête et buste en blanc à 30 % —, un anneau .sq-mask__ring et un prénom .sq-mask__name. L'image est découpée par clip-path: var(--sqm-squircle), une superellipse n = 4 de 64 points en pourcentages. Au survol, elle passe à var(--sqm-squircle-tight), n = 5, avec transition: clip-path 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) : les deux polygones ont 64 points dans le même ordre, le navigateur les interpole. Au point à 45°, le bord se rapproche du coin de 7,2 à 5,8 px sur chaque axe : le masque se « tend » vers le carré. Mesuré pendant la transition, à 120 ms : 31,5 % pour un point qui va de 34,3 % à 30,3 %, dans Chromium 151, Firefox 153 et WebKit 26.
En même temps, en 0,5 s : le bloc grossit de 10 % (scale(1.1), avec rebond), l'anneau — 4 px autour de l'image, bordure de 2 px, border-radius: 28% — passe de l'opacité 0 et scale(0.9) à 1, dans la couleur de sa position (violet, rose, cyan, vert par :nth-child) ; le prénom (9,6 px, graisse 600, #a1a1aa) apparaît 18 px sous le portrait en 0,3 s. L'anneau n'est pas découpé : c'est un frère de l'image, il reste entier autour du masque. Aucun JavaScript.
Les deux masques, --sqm-squircle et --sqm-squircle-tight, sont des variables CSS de même structure, sans <clipPath> SVG : c'est ce qui permet au « resserrement » du survol d'exister. Deux url(#…) vers des SVG absents laisseraient des portraits carrés, et même présents ils ne s'interpoleraient pas l'un vers l'autre. Les dégradés des portraits de démonstration portent des identifiants préfixés, sqm-grad-1 à 4, pour ne pas croiser un id générique de votre page.
Accessibilité
- Le prénom n'apparaît qu'au survol : au clavier, il ne se montre jamais — les
.sq-masksont desdivsanstabindex(mesuré : Tab ne s'y arrête pas). Il reste dans le DOM avecopacity: 0, donc lu par les lecteurs d'écran. Si les portraits mènent à une fiche, faites de.sq-maskun lien et ajoutez.sq-mask:focus-visible .sq-mask__name { opacity: 1 }ainsi que la même règle pour l'anneau, qui sert alors d'indicateur de focus (il n'est pas rogné). - Images : remplacez les SVG de démonstration par
<img class="sq-mask__img" src="…" alt="Dr Hélène Marchal, médecin généraliste">—object-fit: coverest déjà dans le CSS etclip-paths'applique à l'image. Les SVG du code n'ont niroleni titre : s'ils restent décoratifs, ajoutezaria-hidden="true". - Contraste du prénom :
#a1a1aaà 9,6 px vaut 7,7:1 sur le fond sombre#0a0a0f, mais 2,6:1 sur une page blanche — et la taille est petite. Sur fond clair, passez.sq-mask__nameà#334155et 12 px. L'anneau, seul porteur de la couleur, ne doit pas être la seule façon de lire une profession : doublez-la d'un mot. Pas deprefers-reduced-motion: le grossissement de 10 % reste actif sous la préférence (mesuré).
Compatibilité navigateur
CSS seul : clip-path: polygon() sur un élément <svg> (ou <img>), transition de clip-path entre deux polygones de 64 points, propriétés personnalisées, transform, opacity. Zéro JavaScript, aucune image externe. Masque et resserrement mesurés dans Chromium 151, Firefox 153 et WebKit 26.
Sans clip-path (Firefox avant 54, Safari avant 13.1 sans préfixe), les portraits sont carrés ; l'anneau, le grossissement et le prénom fonctionnent toujours.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="sq-masks-wrap">
<div class="sq-mask">
<svg class="sq-mask__img" viewBox="0 0 90 90">…</svg>
<span class="sq-mask__ring"></span>
<span class="sq-mask__name">…</span>
</div>
<div class="sq-mask">…</div>
<div class="sq-mask">…</div>
<div class="sq-mask">…</div>
</div>
</div>Le code complet HTML + CSS + JS de Squircle Image Masks, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Formes de départ et de survol (CSS — --sqm-squircle, --sqm-squircle-tight) |
n = 4, puis n = 5 au survol | Pour un resserrement plus visible, remplacez la forme de départ par une superellipse n = 3 (plus ronde) : recalculez ses 64 points en gardant le même ordre. Un polygone d'un autre nombre de points casserait l'animation. |
Image (HTML — .sq-mask__img) |
portrait SVG de démonstration, dégradé sqm-grad-N |
Remplacez le <svg> par un <img> de la même classe, avec un alt. Si vous gardez des SVG et collez l'effet deux fois, renommez les ids de la seconde copie. |
Taille (CSS — width / height de .sq-mask) |
90 × 90 px | Le masque est en pourcentages : il suit. Reculez .sq-mask__name (bottom: -22px) quand la taille augmente. |
Anneau (CSS — .sq-mask__ring) |
4 px autour, bordure 2 px, border-radius: 28% |
Couleurs par :nth-child(1) à (4). Pour un anneau superelliptique, remplacez la bordure par un fond et clip-path sur deux couches. |
Durées (CSS — transition) |
masque 0,6 s, grossissement et anneau 0,5 s, prénom 0,3 s | Gardez le masque plus long que le reste : c'est lui qui se voit le moins, il doit finir en dernier. |
FAQ
polygon() de 64 points : deux url(#…) vers des <clipPath> SVG ne s'interpoleraient pas.<img class="sq-mask__img" src="portrait.jpg" alt="…"> à la place du <svg>. width: 100%, height: 100% et object-fit: cover sont déjà dans le CSS : la photo remplit le carré, puis le masque la découpe. Prévoyez des visages centrés, le haut des coins étant retiré.clip-path est posé sur l'image seulement ; l'anneau est un élément frère, placé 4 px autour, avec un border-radius de 28 %. S'il était découpé par la même forme, sa bordure, qui déborde du masque, serait coupée.
