Glass Notification
Une pile de trois notifications de verre — succès, information, alerte — qui entrent en glissant de 30 px avec 0,15 s de décalage, chacune avec son icône teintée, sa pastille qui pulse et sa croix ; CSS pur, entrée réglée pour ne pas clignoter avant de glisser.
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
Une colonne .glass-notif-scene de 340 × 200 px (flex, écart de 10 px) qui empile trois .glass-notif de 290 px, posées sur deux halos fixes floutés à 50 px (cyan #22d3ee de 120 px en haut à droite, violet #a855f7 de 100 px en bas à gauche, à 50 % d'opacité). Chaque toast est un blanc à 7 % avec backdrop-filter: blur(20px) et son préfixe -webkit-, bordure blanche à 10 %, coins de 12 px, marges de 12 × 14 px, et trois colonnes : une icône dans un carré de 32 px teinté à 15 % de sa couleur (✓ vert #22c55e, ⓘ cyan #06b6d4, ⚠ ambre #f59e0b), un titre de 12 px graisse 600 et un texte de 10,4 px à 50 % de blanc, et une croix de 20 px. Une pastille de 6 px à la couleur du type, avec son halo, pulse dans le coin haut droit (notifPulse, 2 s, opacité 1 → 0,4 → 1).
L'entrée : notifSlideIn fait glisser chaque toast de 30 px vers la gauche en passant de transparent à opaque, en 0,5 s ease-out. Le premier part tout de suite, les deux autres attendent 0,15 et 0,3 s (délais posés en ligne dans le HTML), ce qui produit la cascade. Au survol, un toast se décale de 4 px vers la droite en 0,3 s (mesuré dans Chromium et Firefox), et la croix s'éclaircit quand on la survole elle-même. L'animation se joue une fois, quand le toast apparaît dans la page : au chargement, ou plus tard si vous l'insérez par script — c'est ainsi qu'une vraie notification arrive.
L'entrée utilise animation-fill-mode: backwards, et ce réglage est le cœur de la cascade. Sans remplissage (none), les toasts 2 et 3 s'afficheraient à pleine opacité pendant leur délai, puis disparaîtraient d'un coup au démarrage de l'animation avant de glisser — mesuré, opacité 1 à 100 ms pour le deuxième et à 250 ms pour le troisième. Avec backwards, chaque toast garde son état de départ (transparent, décalé de 30 px) pendant son délai : opacité 0 aux mêmes instants. Pas both non plus : garder l'état final appliqué après l'animation écraserait le décalage de 4 px du survol (mesuré : survol bloqué à 0 px avec both). Le flou a sa forme -webkit-backdrop-filter pour Safari avant 18. Aucun JavaScript : la croix ne ferme rien (voir la FAQ).
Accessibilité
- Annonce aux lecteurs d'écran : rien n'est déclaré. Une notification qui apparaît doit être annoncée : placez la pile dans un conteneur
role="status"(ouaria-live="polite") présent dès le chargement, et insérez-y les toasts par script ; pour une alerte urgente,role="alert"sur le toast. Les icônes ✓ ⓘ ⚠ sont lues telles quelles : ajoutezaria-hidden="true"et laissez le titre porter le sens (« Succès », « Attention »). - Croix de fermeture : un
divde 20 px avec « ✕ » à 40 % de blanc — contraste mesuré entre 2,6:1 et 3,1:1, sous le seuil de 3:1 des éléments d'interface, et hors de portée du clavier. Remplacez-la par<button type="button" aria-label="Fermer">, montez sa couleur à 70 % et agrandissez sa zone cliquable à 24 px au moins. - Contraste du texte : titres 13,8 à 15,6:1, texte de 10,4 px entre 4,7 et 5,0:1 (mesuré). Le texte passe, mais 10,4 px est petit : 12 px améliore la lecture sans changer la mise en page. La couleur n'est pas seule à porter le type de message : l'icône et le titre le disent aussi.
- prefers-reduced-motion absent du code : l'entrée glissée et la pulsation des pastilles continuent sous l'émulation. Ajoutez
@media (prefers-reduced-motion: reduce) { .glass-notif { animation: none } .glass-notif-dot { animation: none } }: les toasts apparaissent directement, les pastilles restent allumées.
Compatibilité navigateur
CSS seul : backdrop-filter (+ -webkit-), filter: blur(), @keyframes avec animation-fill-mode: backwards et délais en ligne, flexbox. Zéro JavaScript, zéro dépendance. Flou d'arrière-plan : Chrome 76+, Edge 79+, Firefox 103+, Safari 9+ préfixé (préfixe présent dans le code), sans préfixe depuis Safari 18. Mesuré dans Chromium 151 et Firefox 153 : mêmes opacités d'entrée aux mêmes instants (0 → 0,31 → 0,68 → 1), décalage de survol de 4 px, pastilles qui pulsent. Le flou n'est peint que dans les captures de Chromium ; Firefox et WebKit 26.5 sous Playwright le calculent (blur(20px)) sans le dessiner, même sur un test minimal.
Sans flou d'arrière-plan, chaque toast reste un voile blanc à 7 % sur le fond : sur un flux vidéo ou une carte détaillée, le texte se lit moins bien. Prévoyez une teinte plus opaque (rgba(20,22,30,.75)) dans @supports not (backdrop-filter: blur(1px)).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="glass-notif-scene">
<div class="glass-notif-orb glass-notif-orb--1"></div>
<div class="glass-notif-orb glass-notif-orb--2"></div>
<div class="glass-notif glass-notif--success">
<span class="glass-notif-dot"></span>
<div class="glass-notif-icon">✓</div>
<div class="glass-notif-body">
<h4>…</h4>
<p>…</p>
</div>
<div class="glass-notif-close">✕</div>
</div>
<div class="glass-notif glass-notif--info" style="animation-delay: 0.15s;">…</div>
<div class="glass-notif glass-notif--warning" style="animation-delay: 0.3s;">…</div>
</div>
</div>Le code complet HTML + CSS + JS de Glass Notification, 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 |
|---|---|---|
Cascade d'entrée (HTML — style="animation-delay: 0.15s", 0.3s) |
0, 0,15 et 0,3 s | Gardez animation-fill-mode: backwards (dans le raccourci animation) si vous changez les délais : sans lui, un toast en attente s'affiche plein avant de glisser. Pour un toast ajouté seul par script, supprimez le délai. |
Glissement (CSS — @keyframes notifSlideIn { 0% { transform: translateX(30px); opacity: 0 } }) |
30 px depuis la droite, 0,5 s ease-out |
Pour une pile en haut de l'écran, entrez par le haut (translateY(-16px)) ; pour une pile à gauche, translateX(-30px) et un survol en translateX(-4px). |
Types de message (CSS — .glass-notif--success, --info, --warning) |
vert #22c55e, cyan #06b6d4, ambre #f59e0b |
Chaque type règle la teinte de l'icône (fond à 15 %, bordure à 20 %) et la pastille. Ajoutez un type erreur sur le même modèle : .glass-notif--error .glass-notif-icon { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.2) } et sa pastille en #ef4444. |
Pastille (CSS — .glass-notif-dot, notifPulse 2s) |
6 px, opacité 1 → 0,4, 2 s, sur les trois toasts | Réservez la pulsation aux messages qui demandent une action : .glass-notif--success .glass-notif-dot { animation: none }. Une pastille qui pulse sur tout ne distingue plus rien. |
Verre (CSS — background: rgba(255,255,255,.07), backdrop-filter: blur(20px)) |
blanc à 7 %, 20 px | Sur un flux vidéo clair ou une carte lumineuse, passez à rgba(20,22,30,.45). Montez le flou à 28 px au-dessus d'un fond très détaillé (plan, texte). |
Largeur et position de la pile (CSS — .glass-notif { width: 290px }, .glass-notif-scene) |
290 px, colonne centrée de 340 × 200 px | En application, placez la colonne en position: fixed; right: 16px; top: 16px avec height: auto, et laissez les halos de côté : la page derrière colore le verre. |
FAQ
.glass-notif et insérez-le dans la colonne : l'animation d'entrée se joue toute seule à l'insertion. Pour fermer, remplacez la croix par un <button> qui retire son toast (btn.closest('.glass-notif').remove()) ; pour une fermeture automatique, un setTimeout de 5 à 8 s sur les messages de succès, jamais sur une alerte. Et pensez au conteneur role="status" pour que l'arrivée soit annoncée.none, il prend son style normal, pleinement visible, puis l'animation démarre à opacité 0 et décalée de 30 px — il disparaît et revient en glissant (mesuré : opacité 1 à 100 ms pour le deuxième toast, 0 avec backwards). backwards applique l'état de départ pendant le délai. both ferait la même chose, mais garderait aussi l'état final après l'animation, ce qui écrase le décalage de 4 px au survol. Si vous changez l'animation, gardez backwards dans la ligne animation de .glass-notif.
