Shape-Aware Shadows
box-shadow, bordure et outline épousent les polygones clip-path grâce à border-shape — étiquette, ticket, bulle — repli drop-shadow universel.
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
Problème classique de clip-path : la découpe visuellement parfaite, mais box-shadow et border restent rectangulaires — l'ombre dépasse les bords découpés ou reste invisible dans les zones retirées. border-shape corrige cela en redéfinissant le modèle de boîte CSS : la bordure, l'ombre et l'outline suivent le polygone déclaré comme si la forme taillée était la boîte elle-même.
L'effet définit trois formes via clip-path: polygon(…) sur les variantes .bsc-card--tag, .bsc-card--ticket et .bsc-card--bubble. Dans les navigateurs qui supportent la propriété — détectés par @supports (border-shape: polygon(…)) — clip-path est annulé et remplacé par border-shape avec le même polygone. border et box-shadow suivent alors la géométrie exacte : liseré sur la flèche de l'étiquette, ombre épousant les encoches du ticket, shadow sous la queue de la bulle.
Le repli est traité en base sur .bsc-card : filter: drop-shadow() suit déjà la découpe clip-path nativement dans tous les navigateurs. Dans le bloc @supports, filter est annulé (filter: none) pour laisser place au box-shadow natif — transition propre, sans double ombre. Aucune erreur JS, aucune dégradation visuelle notable sur Firefox ou Safari.
Le JS câblé sur #bscTag démontre la mécanique en temps réel : un clic alterne entre trois polygones dans le tableau shapes[] (pointe gauche, pointe droite, rectangle) et met à jour soit clipPath soit borderShape selon le support détecté. L'ombre et la bordure recalculent leur géométrie immédiatement — ce qui est impossible à obtenir avec clip-path seul.
Accessibilité
- prefers-reduced-motion : présent dans le CSS —
transition: noneettransform: noneau hover annulent toute animation quand l'OS signale une préférence réduite. - Le bouton
#bscTagest un<button>natif avecaria-label="Carte étiquette — cliquer pour changer de forme"— activable au clavier (Entrée/Espace), dans le flux de tabulation normal. :focus-visibleapplique un outline violet2px solid #a78bfaavecoutline-offset: 4pxsur tous les éléments.bsc-cardfocusables.- Contraste texte : blanc sur le dégradé violet de l'étiquette (#7c3aed → #db2777) atteint un ratio ≥ 5,5:1 — conforme WCAG AA.
- Les variantes ticket et bulle sont des
<div>non interactifs — aucunrolenitabindexsupplémentaire n'est nécessaire : seule l'étiquette (bouton natif) est interactive.
Compatibilité navigateur
border-shape est une propriété CSS cutting-edge détectée par @supports. Le repli drop-shadow + clip-path couvre tous les navigateurs modernes sans erreur.
filter: drop-shadow() sur .bsc-card suit déjà le contour clip-path nativement. Annulé uniquement dans le bloc @supports où box-shadow prend le relais — les formes restent visuellement propres sur tout navigateur sans border-shape.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="bsc-scene">
<!-- Étiquette pointée — clic → cycle de formes (bscTag requis) -->
<button class="bsc-card bsc-card--tag" id="bscTag" type="button"
aria-label="Carte étiquette — cliquer pour changer de forme">
<span class="bsc-price">-40%</span>
<span class="bsc-label">Offre d'été</span>
</button>
<!-- Ticket à encoches latérales -->
<div class="bsc-card bsc-card--ticket">
<div class="bsc-ticket-main">
CONCERT
<span>Rangée F · Siège 12</span>
</div>
<div class="bsc-ticket-stub">A-12</div>
</div>
<!-- Bulle de chat avec queue en bas -->
<div class="bsc-card bsc-card--bubble">
<p>Votre texte ici.</p>
</div>
</div>
</div>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 |
|---|---|---|
| clip-path / border-shape (polygone) | polygon spécifique à chaque variante | Définissez votre forme dans clip-path (repli) et copiez la même valeur dans border-shape (@supports). Les deux doivent rester synchronisés pour un rendu cohérent. |
| background: linear-gradient(…) | violet/rose — bleu/marine — teal | Chaque variante a son propre gradient. Remplacez les stops de couleur pour votre palette brand sans toucher à la géométrie. |
| filter: drop-shadow(…) (base) | 0 10px 22px rgba(0,0,0,.55) | Ombre du repli sur .bsc-card (navigateurs sans border-shape). Ajustez offset, flou et couleur librement. |
| box-shadow (@supports) | 0 10px 26px rgba(0,0,0,.55) + glow hover violet | Ombre native dans les navigateurs avec border-shape. Indépendant de filter ; peut prendre une couleur teintée pour un glow brand au hover. |
| border (@supports) | 1.5px solid rgba(255,255,255,.22–.35) | Bordure visible uniquement avec border-shape (sinon clip-path la coupe). L'opacité diffère par variante : 0,35 étiquette, 0,22 ticket, 0,30 bulle. |
| shapes[] (JS, tableau ~ligne 7) | 3 polygones : pointe gauche, pointe droite, rectangle | Formes cyclées au clic sur #bscTag. Ajoutez ou retirez des polygones pour enrichir la démo ou réduire à une seule forme fixe. |
| transition (hover) | .35s cubic-bezier(.2,.9,.3,1.4) | Durée et easing du translateY(-6px) et du changement d'ombre. Mettez à 0 dans les contextes où l'animation n'est pas souhaitée. |
FAQ
clip-path, filter: drop-shadow suit déjà la découpe — c'est la solution de repli. Mais border et outline restent rectangulaires (clip-path les coupe simplement), et box-shadow n'est pas disponible. border-shape redéfinit le modèle de boîte : border, outline et box-shadow (avec support multi-couche, inset et couleur) suivent tous la géométrie du polygone.clip-path: polygon(…) sur la variante de carte, puis copiez exactement la même valeur dans border-shape à l'intérieur du bloc @supports. Le JS démo synchronise aussi ce polygone dans le tableau shapes[]. Pour dessiner visuellement les coordonnées, utilisez Firefox DevTools (éditeur clip-path intégré) ou bennettfeely.com/clippy/.filter: drop-shadow() sur .bsc-card et clip-path sur chaque variante — combinaison supportée dans tous les navigateurs modernes. Le bloc @supports améliore progressivement l'expérience (bordure native + box-shadow) sans jamais casser la version de repli. L'effet reste visuellement propre dans Firefox et Safari.
