Menú contextual de cristal
Pulsa la foto y se abre un menú de cristal con muelle mientras la imagen se encoge y el fondo se desenfoca.
Ajustes
Código
<div class="uv-gcm"><button type="button" class="ph" aria-haspopup="menu" aria-expanded="false"><span class="im"></span><span class="cp">Atardecer en Cádiz</span></button><div class="mn" role="menu"><button type="button" role="menuitem" style="--i:0"><span>Copiar</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16H8"/></svg></button><button type="button" role="menuitem" style="--i:1"><span>Compartir</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V3.5M7.5 8L12 3.5 16.5 8M5 12v6.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V12"/></svg></button><button type="button" role="menuitem" style="--i:2"><span>Favorito</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button><button type="button" role="menuitem" class="dg" style="--i:3"><span>Eliminar</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5"/></svg></button></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
Los menús de pulsación larga y clic derecho son donde mejor luce el cristal, flotando sobre el contenido al que afectan. Al hacer clic, clic derecho o pulsar la tarjeta de la foto, esta se encoge un poco, el fondo se oscurece y se desenfoca y se abre desde la esquina un menú esmerilado con copiar, compartir, favorito y eliminar en rojo, con cada opción apareciendo escalonada.
El menú es un menu real con menuitems, el foco entra en él al abrirse y Escape lo cierra y devuelve el foco a la foto. Ajusta el desenfoque y el tinte a tu fondo y cambia el degradado por cualquier imagen.