Broken Glass
Plaque de verre brisé en CSS pur : cinq fissures fines, des reflets en biais et quatre éclats dont l'éclat respire lentement, sous un texte qui reste net.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La plaque .bgl-glass (250×180 px, dégradé violet nuit #2d1b4e → #1a1a2e, coins de 8 px) est striée par son pseudo-élément ::before : quatre bandes de lumière blanche très douce (5 à 10 %) en diagonale, qui donnent l'impression d'une vitre. Par-dessus, cinq .bgl-crack d'un pixel d'épaisseur tracent les fissures ; chacune est blanche au centre et s'efface vers ses extrémités, inclinée de −20° à 25°.
Quatre .bgl-shard découpés en quadrilatères irréguliers (clip-path: polygon()) figurent les éclats, avec un liseré blanc à 15 %. Leur opacité passe de 0,5 à 1 puis revient en 3 s, décalée d'un éclat à l'autre (0 ; 0,5 ; 1 ; 1,5 s) : la lumière semble glisser d'un morceau à l'autre. Rien d'autre ne bouge.
Fissures et éclats sont placés et dimensionnés en pourcentages de la plaque : avec --bgl-w: 100% et --bgl-h: 100%, tout le motif s'agrandit à la taille d'un haut de page. Le texte .bgl-text passe au-dessus (z-index: 1) avec un léger halo blanc.
Aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rendu identique, deux copies indépendantes, aucune erreur.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la respiration des éclats est coupée ; ils restent affichés à 75 % d'opacité. Le verre brisé est entier, simplement immobile. - Photosensibilité : aucun clignotement. Le seul mouvement est une variation lente d'opacité (3 s par cycle) sur de petites surfaces peu lumineuses.
- Lecteurs d'écran : fissures et éclats portent
aria-hidden="true"; seul le texte de.bgl-textest lu. Si la plaque sert de panneau de fin de partie, annoncez-le avecrole="dialog"et unaria-labelsur son conteneur. - Clic et toucher : fissures et éclats ont
pointer-events: none: un bouton placé dans.bgl-textreste cliquable partout.
Compatibilité navigateur
CSS seul : variables, clip-path: polygon(), inset, calc() dans animation-delay. Version minimale fixée par la propriété inset d'après les données MDN (Chrome 87, Firefox 66, Safari 14.1). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5.
Sans inset, les reflets en biais disparaissent (fissures et éclats restent). Sans clip-path, les éclats deviennent des rectangles pâles. Sans variables CSS, la plaque perd sa taille et son fond.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0259-root">
<div class="bgl-glass">
<div class="bgl-crack bgl-crack-1" aria-hidden="true"></div>
<!-- … bgl-crack-2 à bgl-crack-5 -->
<div class="bgl-shard bgl-shard-1" aria-hidden="true"></div>
<!-- … bgl-shard-2 à bgl-shard-4 -->
<span class="bgl-text">…</span>
</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 |
|---|---|---|
--bgl-w / --bgl-h |
250px / 180px |
Taille de la plaque. Fissures et éclats suivent, en pourcentages. 100% pour remplir le conteneur. |
--bgl-bg |
linear-gradient(135deg, #2d1b4e, #1a1a2e) |
Fond de la plaque. Les fissures sont blanches et translucides : gardez un fond sombre ou moyen pour qu'elles se voient. |
--bgl-speed |
3s |
Durée de la respiration des éclats ; les décalages entre éclats suivent (un sixième, un tiers, une moitié du cycle). |
--bgl-radius |
8px |
Arrondi des coins de la plaque. |
--bgl-root-bg / --bgl-root-h |
#0a0a0f / 300px |
Fond et hauteur minimale de la racine. Un fond semi-transparent en fait un voile sur votre page ; transparent et 0 la font disparaître. |
Fissures (CSS — .bgl-crack-1 à -5) |
Positions et angles fixes | Changez top, left et rotate() pour un autre impact, ou copiez une ligne .bgl-crack pour en ajouter. |
Texte (HTML — .bgl-text) |
« SHATTERED » | Remplacez-le par n'importe quel contenu : titre, score, boutons. |
FAQ
--bgl-bg (url(photo.jpg) center / cover). Les fissures et éclats sont blancs et translucides : sur une photo très claire, assombrissez-la un peu avec un dégradé noir par-dessus dans la même valeur.background de .bgl-shard à rgba(255,255,255,.08).
