Recientes
CafeteríasGasolinerasFarmacias de guardiaSuchleiste aus Glas
Eine gläserne Suchleiste, die sich beim Fokus streckt, einen Abbrechen-Button zeigt und letzte Suchen anbietet.
Einstellungen
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="Suchen" aria-label="Suchen"><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">Abbrechen</button></div><div class="sg"><p>Zuletzt verwendet</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>Tankstellen</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>Notdienst-Apotheken</span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Schwebende Suchleisten in Karten-, Musik- und Shopping-Apps liegen inzwischen als Milchglas über dem Inhalt. Diese verwischt und sättigt den Sonnenuntergang dahinter, bekommt im Fokus einen helleren Rand, macht Platz für einen hereingleitenden Abbrechen-Button und öffnet darunter federnd ein Glaspanel mit den letzten Suchen.
Alle Zustände kommen aus :focus-within, die Leiste funktioniert also ohne JavaScript, außer beim Leeren über Abbrechen. Zwei Regler steuern Unschärfe und Tönung des Glases, so passt sie zu hellen und dunklen Hintergründen und der Text bleibt überall gut lesbar.