Holographic Sticker Peel
Un sticker rond de 208 px, liseré blanc de 9 px et face holographique à trois couches, dont le coin haut-droit se soulève au survol et se décolle aux trois quarts au clic : deux clip-path polygonaux interpolés en 550 ms, un « rouleau » métallique posé sur la ligne de pli, un état aria-pressed — tout le visuel en CSS, douze lignes de JS pour la bascule.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
.hsp-sticker est un button de 208 × 208 px sans fond. Trois couches : ::after (z 0), un disque d'ombre au sol — box-shadow: 0 10px 24px rgba(0,0,0,.45), qui grandit au survol (0 16px 34px .55) et se décale au clic (6px 30px 48px .65) ; .hsp-face (z 2), le sticker lui-même : border: 9px solid #fff, border-radius: 50%, et trois background-image fondues par background-blend-mode: screen, overlay, normal — un éclat spéculaire à 118° (blanc à 55 % vers 47 %), des micro-stries à 104° (période 6 px : 1 px blanc 9 %, 1 px blanc 5 %) et la base irisée conic-gradient(from 210deg at 42% 36%, c1 … c5, c1) pilotée par cinq variables (--hsp-c1 cyan #62e6ff, rose #ff8ae1, jaune #ffe95c, violet #b18cff, vert #7dffc4). Le motif « −20 % » est en 2,5 rem / 900, encre #14141c ; la sous-ligne en .68 rem capitales à opacité .78.
Le décollement est un clip-path sur la face, avec trois polygones à cinq sommets : repos (0 0, 100% 0, 100% 0, 100% 100%, 0 100%) — le sommet dédoublé garde le compte constant, condition pour que le navigateur interpole ; survol et focus (0 0, 74% 0, 100% 26%, …) ; clic (0 0, 26% 0, 100% 74%, …). Transition --hsp-dur: .55s avec --hsp-ease: cubic-bezier(.32, 1.35, .46, 1) — le second point de contrôle à 1,35 fait dépasser la cible de quelques pour cent avant de se poser, le claquement d'un vrai autocollant. Géométrie mesurée : au survol la diagonale passe à 38 px du coin alors que le bord du disque en est à 43 px — elle n'entame que 4,8 px du liseré blanc ; le soulèvement visible vient du rouleau. Au clic, 27 % de la surface du disque disparaît. [aria-pressed="true"] .hsp-face joue aussi hsp-tug (.28 s, scale(1.022, .985) à 38 %), l'étirement de la colle.
Le rouleau : .hsp-flap-wrap (z 3, border-radius: 50%; overflow: hidden — il rogne au die-cut — et filter: drop-shadow(-4px 6px 7px .38)) contient .hsp-roll, une pilule large de 170 % tournée à 45° (translate(-50%,-50%) rotate(45deg)) peinte comme un cylindre (#565b66 → #aab0bc → #fff 34% → #d9dde4 → #8f95a2 → #4e525d) et teintée d'un dégradé irisé en overlay. Son centre suit la ligne de pli : repos left: 104%; top: -4% (hors du disque, opacité 0), survol 87% / 13% et height: 9% (19 px), clic 63% / 37% et 15% (31 px) — toujours le milieu de la diagonale courante, l'opacité arrivant en .25 s. Au-delà du rouleau rien n'est dessiné : le fond de la page se voit à travers — le sticker est soulevé, il n'a pas de verso.
Le script : pour chaque .hsp-sticker, un clic inverse aria-pressed ; un écouteur keydown sur document repose tous les stickers à Échap. C'est tout — le survol est en CSS. prefers-reduced-motion: reduce ramène les trois transitions à .01 s et supprime l'étirement ; prefers-reduced-transparency: reduce remplace les couches holo par des gris plats (#b8bec9 face, #9aa0ab rouleau). Le CSS livre aussi des règles pour .pv-product (une mise en page « carte produit » : sticker de 108 px en position: absolute; top: -34px; right: -26px, liseré 6 px, motif 1,3 rem) et .hsp-high-contrast (miroir d'un interrupteur de démo) — restes de la page catalogue, qu'aucun élément du HTML vendu ne porte.
Accessibilité
- prefers-reduced-motion géré (transitions .01 s, étirement supprimé) et prefers-reduced-transparency géré (face et rouleau en gris plats) — les deux, ce qui est rare dans le catalogue.
- Sémantique :
buttonavecaria-pressed, donc bouton à bascule annoncé comme tel ; Entrée et Espace décollent, Échap repose. Mais la face estaria-hidden: « −20 % Summer Deal » n'est jamais lu, seul l'aria-labelvendu (en français, il décrit le geste) l'est. Mettez l'offre dans le libellé :aria-label="Sticker −20 %, offre d'été — activer pour le décoller". - Contraste mesuré (Chromium, pixels sous le texte, face holo au repos) : motif
#14141c40 px sur la face = 8,7:1 au minimum (AAA) ; sous-ligne#14141cà opacité .78, 10,9 px = 11,7:1 au minimum. Encre sombre sur pastels clairs : le bon choix, aucune couleur à changer — même sur le violet#b18cff, le plus sombre des cinq, le motif tient 7:1. - Focus :
:focus-visibledessineoutline: 3px solid #a855f7à 8 px avecborder-radius: 50%— l'anneau suit le disque — et soulève le coin comme le survol (:focus-visible .hsp-face,.hsp-roll). - Tactile : un tap = clic = décollé ; l'aperçu « coin soulevé » n'existe pas au doigt, le sticker passe directement à l'état décollé. Sur iOS le
:hoverreste collé après le tap, mais la règle de clic, déclarée après, l'emporte. Cible 208 px ;-webkit-tap-highlight-color: transparentsupprime le flash gris. L'écouteur Échap est global : il repose aussi les stickers d'autres composants de la page.
Compatibilité navigateur
Requiert clip-path: polygon() interpolé, conic-gradient(), background-blend-mode, filter: drop-shadow() et les variables CSS. Les media queries prefers-reduced-transparency sont simplement ignorées par les navigateurs qui ne les connaissent pas. JavaScript ES5, zéro dépendance.
Sans JavaScript, le survol et le focus soulèvent toujours le coin, mais rien ne décolle le sticker. Sans conic-gradient, la déclaration background-image entière est invalide : le disque n'a plus que son liseré blanc — ajoutez background-color: #b8bec9 (la couleur du repli reduced-transparency). Sans transition de clip-path, les états sautent d'un coup.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<button class="hsp-sticker" id="hspDemo" type="button" aria-pressed="false" aria-label="Sticker holographique — survoler pour soulever le coin, activer pour le décoller">
<span class="hsp-flap-wrap" aria-hidden="true">
<span class="hsp-roll"></span>
</span>
<span class="hsp-face" aria-hidden="true">
<span class="hsp-motif">-20%</span>
<span class="hsp-motif-sub">Summer Deal</span>
</span>
</button>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Polygones (CSS — .hsp-face clip-path, trois états) | 74 % / 26 % au survol, 26 % / 74 % au clic | Où passe la ligne de pli. Les points 2 et 3 restent sur les bords haut et droit ; gardez p et 100 − p pour une diagonale à 45°. Cinq sommets dans chaque état, sinon aucune interpolation. |
| Rouleau (CSS — .hsp-roll left / top / height par état) | 87 % / 13 % / 9 % → 63 % / 37 % / 15 % | Le centre du rouleau doit être le milieu de la ligne de pli : pour une découpe qui coupe le bord haut à p %, left: (p + 100) / 2 %, top: (100 − p) / 2 %. La hauteur grandit avec la matière enroulée. |
--hsp-dur / --hsp-ease (CSS — .hsp-sticker) |
.55s / cubic-bezier(.32, 1.35, .46, 1) | Durée et courbe des trois transitions. Le 2ᵉ paramètre au-dessus de 1 fait le dépassement : 1 = arrêt net, 1.6 = coin qui vibre. |
--hsp-c1 … --hsp-c5 (CSS — .hsp-sticker) |
cyan, rose, jaune, violet, vert | Les cinq couleurs du conic irisé. Gardez des pastels clairs : le motif est en encre sombre et compte sur un fond à 7:1 ou plus. Le rouleau a sa propre teinte, indépendante. |
| Liseré (CSS — .hsp-face border 9px #fff) | 9px | Épaisseur du die-cut blanc. 6 px à 120 px de diamètre, 12 px pour un autocollant épais. La découpe le traverse : au survol c'est presque uniquement lui qui est entamé. |
| Ombre au sol (CSS — .hsp-sticker::after, trois états) | 0 10px 24px .45 → 0 16px 34px .55 → 6px 30px 48px .65 | Le décollement se lit aussi par l'ombre, qui s'écarte de 6 px au clic. Réduisez le flou (24 → 12 px) sur fond clair. |
| Taille (CSS — .hsp-sticker width / height) | 208 × 208 px | Polygones et rouleau sont en % du sticker et suivent ; le liseré, le motif (rem) et l'ombre (px) ne suivent pas — à 120 px, passez le liseré à 6 px et le motif à 1,3 rem, comme le font les règles .pv-product livrées. |
FAQ
polygon(0 0, 64% 0, 100% 36%, …) avec le rouleau à 82% / 18%..hsp-flap-wrap.document). Chaque sticker est indépendant — sélection par classe, aucun id nécessaire ; l'id="hspDemo" du HTML vendu ne sert à rien, retirez-le si vous collez plusieurs stickers pour ne pas dupliquer un id.
