Kontextmenü aus Glas
Drück das Foto und ein Glasmenü federt auf, während das Bild leicht schrumpft und der Hintergrund verschwimmt.
Einstellungen
Code
<div class="uv-gcm"><button type="button" class="ph" aria-haspopup="menu" aria-expanded="false"><span class="im"></span><span class="cp">Sonnenuntergang in Cádiz</span></button><div class="mn" role="menu"><button type="button" role="menuitem" style="--i:0"><span>Kopieren</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>Teilen</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>Favorit</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>Löschen</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 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
Long-Press- und Rechtsklick-Menüs sind der Ort, an dem Glas am besten wirkt, schwebend über dem Inhalt, auf den sie sich beziehen. Klick, Rechtsklick oder Drücken auf die Fotokarte verkleinert sie leicht, dunkelt und verwischt den Hintergrund und lässt aus der Ecke ein mattiertes Menü mit Kopieren, Teilen, Favorit und rotem Löschen aufspringen.
Es ist ein echtes Menü mit menuitems, der Fokus wandert beim Öffnen hinein, Escape schließt es und gibt den Fokus ans Foto zurück. Passe Unschärfe und Tönung an deinen Hintergrund an und ersetze den Verlauf durch ein beliebiges Foto.