Scooped Containers
Trois panneaux de verre teinté de 140 px aux coins creusés vers l'intérieur (un quart de cercle de 18 px ôté à chaque coin par clip-path: polygon()), floutés par backdrop-filter avec son préfixe Safari, posés sur un fond à disques nets que le verre adoucit : la forme du ticket et du bon à découper.
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 .scoop-container (140 px de large, 109 px de haut avec ses marges 24/16/16 px, contenu centré en colonne) est découpé par clip-path: var(--scp-scoop-concave) : un polygon() de 28 points en calc(), sept par coin, qui suivent un quart de cercle de 18 px de rayon centré sur le coin — le bord rentre dans le panneau au lieu de s'arrondir vers l'extérieur. En pixels, le creux garde ses 18 px sur un panneau de 140 comme de 330 px (billet de la première scène). Les quatre creux retirent 6,7 % de la surface ; mesuré dans Chromium 151, Firefox 153 et WebKit 26, le point à 2 px du coin ne reçoit pas le clic : il tombe sur ce qu'il y a derrière.
Le verre : un dégradé vertical de la teinte à 20 % vers 5 % (violet, rose, cyan selon :nth-child) et backdrop-filter: blur(4px) doublé de -webkit-backdrop-filter. Pour qu'il y ait quelque chose à flouter, l'enveloppe .scoop-wrap porte son propre fond : quatre disques à bord net (violet, rose, cyan, ambre, de 26 à 36 px de rayon) sur des rayures diagonales sombres, coins arrondis à 22 px. Là où un disque passe sous le verre, son bord devient flou ; à côté, il reste net — c'est ce contraste qui fait lire le verre. Au survol, en 0,4 s, le panneau monte de 4 px et sa teinte passe à 35 % → 10 % ; les dégradés ne s'interpolent pas, la teinte change d'un coup et seul le déplacement est animé.
Trois choix du code tiennent au verre et à la forme. Les coins creusés sont un polygon() dans une variable CSS, sans <clipPath> SVG à fournir (un url(#scoop-concave) sans SVG dans la page laisserait des rectangles). Le flou est déclaré aussi en -webkit-backdrop-filter, la seule forme que lit Safari avant la version 18. Et le verre a son propre décor (.scoop-wrap, quatre disques nets et des rayures) : sur un aplat comme le #0a0a0f d'un cadre de démonstration, il n'aurait rien à flouter et ne serait qu'un rectangle teinté. Les textes (.sc-title, .sc-val) passent par var(--text-primary, #fff) et var(--text-secondary, #aaa), avec une valeur de repli : aucune dépendance au site.
Accessibilité
- Lisibilité sur le verre : le titre blanc de 12,8 px en graisse 700 reste au-dessus de 7:1 sur les zones sombres, mais un disque clair qui passe derrière le texte fait chuter le contraste — c'est le risque de tout panneau de verre. La valeur
.sc-val(10,4 px,#a1a1aa) est la plus exposée. Dans vos pages, gardez les zones vives du fond hors des lignes de texte (la scène des bons les place sous les bords) ou montez l'opacité de la teinte à 40 %. - prefers-reduced-transparency et prefers-reduced-motion : absents du code. Pour les visiteurs qui demandent moins de transparence :
@media (prefers-reduced-transparency: reduce) { .scoop-container { backdrop-filter: none; -webkit-backdrop-filter: none; background: #1b1734 } }. Le soulèvement de 4 px reste actif sous la préférence de mouvement réduit (mesuré) ; neutraliseztransformdans une media query. - Clavier et lecteurs d'écran : des
divaveccursor: pointer, sans rôle nitabindex(Tab ne s'y arrête pas, mesuré). Les emojis (📈 💌 👥) sont lus à voix haute :aria-hidden="true"sur.sc-icon. Pour un billet à présenter, ajoutez un titre (h3) et unaria-labelqui reprend trajet, heure et quai.
Compatibilité navigateur
CSS seul : clip-path: polygon() avec calc(), backdrop-filter et -webkit-backdrop-filter, dégradés radiaux et répétés, propriétés personnalisées. Zéro JavaScript, zéro SVG. La découpe est mesurée identique dans Chromium 151, Firefox 153 et WebKit 26 (coin hors de la zone cliquable dans les trois). Le flou est mesuré dans Chromium (bord des disques adouci sous le verre, net à côté) ; les versions sans écran de Firefox et de WebKit lancées par Playwright n'affichent aucun backdrop-filter, même sur une page témoin sans clip-path — limite de l'outil de test, pas de l'effet : CSS.supports('backdrop-filter', 'blur(4px)') y renvoie vrai.
Sans backdrop-filter (Firefox 70 à 102, Chrome avant 76), le panneau reste teinté et creusé, sans flou : les disques se voient nets à travers. Sans clip-path (Firefox avant 54), les coins redeviennent droits. Dans les deux cas le texte reste en place.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="scoop-wrap">
<div class="scoop-container">
<span class="sc-icon">…</span>
<span class="sc-title">…</span>
<span class="sc-val">…</span>
</div>
<div class="scoop-container">…</div>
<div class="scoop-container">…</div>
</div>
</div>Le code complet HTML + CSS + JS de Scooped Containers, 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 |
|---|---|---|
Rayon des creux (CSS — --scp-scoop-concave sur .scoop-container) |
18 px, 7 points par coin | Les points sont r·sin(a), r·cos(a) pour a = 0°, 15°… 90° : multipliez-les tous par le même facteur (×1,5 pour 27 px). Un creux plus grand que le quart de la hauteur mange le texte du haut. |
Flou (CSS — backdrop-filter et -webkit-backdrop-filter) |
blur(4px) |
Changez les deux lignes ensemble. 8 à 12 px pour un verre plus dépoli : le fond devient une tache de couleur. Le flou n'agit que s'il y a des détails derrière. |
Teinte du verre (CSS — background de .scoop-container et de ses :nth-child) |
violet, rose, cyan à 20 % → 5 % ; 35 % → 10 % au survol | Gardez l'opacité sous 45 % : au-delà, le panneau devient opaque et le flou ne se voit plus. |
Fond derrière le verre (CSS — .scoop-wrap) |
quatre disques nets sur rayures sombres, coins à 22 px | C'est un décor de démonstration : dans une vraie page, remplacez-le par background: none et posez les panneaux sur votre photo ou votre illustration, comme dans les trois scènes. |
Taille (CSS — width et min-height de .scoop-container) |
140 px × 100 px minimum | Les creux en pixels ne bougent pas. Pour un billet horizontal : width: 330px; height: 200px. |
FAQ
clip-path: polygon() : chaque coin est remplacé par sept points posés sur un quart de cercle de 18 px dont le centre est le coin lui-même. Le polygone contourne donc le coin par l'intérieur. border-radius ne sait faire que l'arrondi vers l'extérieur ; l'autre technique courante, un mask à quatre radial-gradient, donne des bords plus lisses mais demande quatre couches de masque et ne se lit pas aussi simplement.backdrop-filter floute ce qu'il y a derrière : sur un aplat uni, il n'y a rien à flouter, et le panneau n'est qu'un rectangle teinté. C'est ce qui arrive sur un fond comme le #0a0a0f d'un cadre de démonstration. Les disques à bord net montrent le verre au premier regard ; remplacez-les par votre propre visuel.-webkit-backdrop-filter jusqu'à sa version 17, et l'accepte encore ensuite. Le code l'écrit donc à côté de la propriété standard. Mesuré dans WebKit 26 : CSS.supports('-webkit-backdrop-filter', 'blur(4px)') renvoie vrai.
