Shape Hero
Bandeau-titre dont la découpe change avec la largeur de son conteneur : bas en biais quand il est étroit, arrondi au milieu, à pans coupés quand il est large.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0756-root, transparente, est le conteneur mesuré (container: shh-hero / inline-size). Elle contient .shh-hero : un bloc centré au dégradé bleu nuit (#0f172a → #1e293b), un titre h3, un sous-titre, et une bande décorative .shh-deco de 40 px collée en bas, dégradé indigo → fuchsia à 30 % d'opacité. La forme vient de clip-path : ce qui est hors de la découpe laisse voir le fond de votre page.
Trois formes. Sous 350 px, un polygone coupe le bas en biais (côté droit remonté à 80 %), et la bande suit le même biais. De 350 à 499 px, @container shh-hero (min-width: 350px) applique une ellipse (ellipse(70% 80% at 50% 40%)) qui arrondit le bas et les angles, avec un titre à 1,2 rem. À partir de 500 px, le bas est taillé à pans coupés (les deux coins inférieurs biseautés de 20 %), la bande devient un hexagone allongé et le titre passe à 1,4 rem.
Les marges intérieures grandissent avec la forme (30/50 px, puis 40/60, puis 50/70 en haut/bas) pour que le texte reste dans la zone visible. clip-path et ces marges s'animent en 0,5 s, la taille du titre en 0,4 s. Pas de JavaScript.
Accessibilité
- Titre réel : le texte est un
h3et un paragraphe, lus normalement ; ajustez le niveau de titre à votre page (souventh1pour un bandeau de haut de page). - Découpe et focus :
clip-pathmasque tout ce qui dépasse de la forme, y compris un contour de focus. Si vous ajoutez un bouton, placez-le au centre, loin des bords coupés. - Bande décorative :
.shh-decoportearia-hidden="true"etpointer-events: none; elle ne gêne ni la lecture ni les clics. - Contraste : titre blanc et sous-titre à 70 % d'opacité sur bleu nuit, au-dessus de 4,5:1.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la découpe, les marges et la taille du titre changent sans transition.
Compatibilité navigateur
Requêtes de conteneur et clip-path avec polygon() et ellipse() (disponibles bien avant @container). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : trois formes aux mêmes paliers, aucune erreur, deux bandeaux indépendants sur une page.
Sans @container, le bandeau garde à toutes les largeurs sa forme étroite, bas en biais.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0756-root">
<div class="shh-hero">
<h3>Titre</h3>
<p>Sous-titre</p>
<div class="shh-deco" aria-hidden="true"></div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Paliers (CSS — @container shh-hero (min-width: 350px) et (min-width: 500px)) |
350 px et 500 px | Pour un en-tête qui n'est large que sur ordinateur, montez le second palier à 720 px. |
Découpes (CSS — clip-path de .shh-hero dans chaque palier) |
Biais, ellipse, pans coupés | Toute forme polygon() fonctionne ; pour une vague, essayez ellipse(90% 100% at 50% 0) au palier large. |
Fond (CSS — .shh-hero { background }) |
#0f172a → #1e293b |
Une photo en background-image avec un voile sombre garde le texte lisible. |
Bande décorative (CSS — .shh-deco) |
40 px, indigo → fuchsia, opacité 0,3 | Supprimez la div pour une découpe nue, ou montez l'opacité à 0,6 pour un liseré plus marqué. |
Marges intérieures (CSS — padding par palier) |
30/50 px, 40/60 px, 50/70 px (haut/bas) | Si votre texte est plus long, augmentez la marge du bas pour qu'il ne touche pas la zone coupée. |
Durée de transition (CSS — transition: clip-path .5s, padding .5s) |
0,5 s | 0,3 s pour un changement plus vif quand on redimensionne. |
FAQ
clip-path rend invisible tout ce qui est hors de la forme, et la racine est transparente : c'est le fond de la page qui apparaît dessous. Pour une couleur de coin précise, donnez un background à .fx-0756-root.
