Biblioteca
Barre de navigation qui devient verre au défilement
Le grand titre s'efface et la barre devient du verre dépoli dès que le contenu passe dessous.
Réglages
Code
<div class="uv-gsn"><header><span class="sm">Bibliothèque</span><button type="button" aria-label="Ajouter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></header><div class="sc" tabindex="0" aria-label="Bibliothèque"><h3 class="lg">Bibliothèque</h3><div class="it" style="--h:0"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:47"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:94"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:141"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:188"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:235"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:282"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:329"><i></i><span><b></b><b></b></span></div></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Les grands titres qui se replient en une barre de verre compacte sont une signature des applis mobiles modernes. En haut de cette liste, l'en-tête est invisible et un grand titre gras s'affiche ; dès que le contenu défile dessous, la barre floute ce qui passe derrière, gagne un fin séparateur et le petit titre centré apparaît.
Un petit script ajoute seulement une classe à un seuil de défilement et tout le changement visuel se fait en CSS. La démo descend puis remonte une fois pour montrer l'effet, et les réglages de flou et de teinte dosent le dépoli.