Recientes
CafeteríasGasolinerasFarmacias de guardiaBarre de recherche en verre
Une barre de recherche en verre qui s'étire au focus, révèle Annuler et affiche les recherches récentes.
Réglages
Code
<div class="uv-gsb"><div class="br"><label class="fd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input type="search" placeholder="Rechercher" aria-label="Rechercher"><span class="mc"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg></span></label><button type="button" class="cn">Annuler</button></div><div class="sg"><p>Récentes</p><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Cafés</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Stations-service</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Pharmacies de garde</span></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 barres de recherche flottantes des applis de cartes, de musique et de shopping se posent désormais sur le contenu comme du verre dépoli. Celle-ci floute et sature le coucher de soleil derrière elle, prend un bord plus lumineux au focus, fait de la place à un bouton Annuler qui glisse et ouvre en dessous un panneau de verre avec les recherches récentes.
Tous les états viennent de :focus-within, la barre fonctionne donc sans JavaScript sauf pour vider le champ. Deux curseurs règlent le flou et la teinte du verre pour s'accorder aux fonds clairs ou sombres et garder un texte lisible.