Glass Navigation

Le code

Un aperçu du code source :

<div class="glass-nav-scene">
    <div class="glass-nav-bg-orb glass-nav-bg-orb--1">
    </div>
    <div class="glass-nav-bg-orb glass-nav-bg-orb--2">
    </div>
    <div class="glass-nav-bar">
      <span class="glass-nav-logo">BRAND</span>
      <div class="glass-nav-links">
        <button class="glass-nav-link glass-nav-link--active">Accueil</button>
        <button class="glass-nav-link">Produits</button>

Cas d'usage concrets

Quelques contextes où Glass Navigation fait mouche :

• Un widget météo ou dashboard
• Une notification flottante
• Une carte de tarif translucide

Comment ça marche

Effet 100 % CSS — aucune dépendance JavaScript. Il s'appuie sur flou d'arrière-plan (backdrop-filter).

À personnaliser

Tu peux régler :

• les couleurs, la taille et le timing directement dans le CSS

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajuste les couleurs et variables CSS à ta marque — aucune dépendance à installer.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre. backdrop-filter demande Safari 9+ / Chrome 76+ (ajoute le préfixe -webkit- pour Safari).

Plus d'effets Glassmorphism

FAQ