Recientes
CafeteríasGasolinerasFarmacias de guardiaBuscador de cristal
Una barra de búsqueda de cristal que se estira al enfocarla, muestra Cancelar y enseña búsquedas recientes.
Ajustes
Código
<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="Buscar" aria-label="Buscar"><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">Cancelar</button></div><div class="sg"><p>Recientes</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>Cafeterías</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>Gasolineras</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>Farmacias de guardia</span></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Las barras de búsqueda flotantes de apps de mapas, música y tiendas ya se colocan sobre el contenido como cristal esmerilado. Esta desenfoca y satura el atardecer de detrás, gana un borde más luminoso al enfocarla, deja sitio a un botón Cancelar que entra deslizándose y abre debajo un panel de cristal con búsquedas recientes y un muelle suave.
Todos los estados salen de :focus-within, así que funciona sin JavaScript salvo para vaciar el campo al cancelar. Dos controles ajustan el desenfoque y el tinte del cristal para que encaje con fondos claros u oscuros y el texto se lea siempre bien.