Agua de hoy
/8
vasos
Wasserglas mit Strohhalm
Ein Trinkzähler: Der Pegel steigt mit jedem Tipp, und Strohhalm und Streifen wirken im Wasser gebrochen.
Einstellungen
Code
<div class="uvq11-wg" style="--lv:.375"><div class="gs"><i class="s1" aria-hidden="true"></i><button type="button" class="tb" aria-label="Ein Glas hinzufügen"><span class="bk"></span><span class="wt"><span class="s2"></span><span class="wr"></span><span class="bb"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span></span><span class="po"></span><span class="gw"></span></button></div><div class="cn"><p class="lb">Wasser heute</p><p class="ct"><output class="n">3</output><span>/8</span></p><p class="un">Gläser</p><div class="bt"><button type="button" class="ch mn" aria-label="Ein Glas entfernen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button><button type="button" class="ch pl" aria-label="Ein Glas hinzufügen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></div></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
Ein Trink-Tracker rund um ein Wasserglas aus CSS. Dahinter liegt eine gestreifte Wand, und im Wasser erscheinen die Streifen breiter und versetzt, während der Strohhalm an der Oberfläche abzuknicken scheint, die bekannte Lichtbrechung von jedem Tisch. Jedes neue Glas fließt mit einem Strahl hinein, der Meniskus schwappt und Bläschen steigen auf.
Ändere die Farben von Wasser und Strohhalm, benenne die Beschriftung um und nutze Plus, Minus oder einen Tipp aufs Glas selbst. Acht Gläser füllen es bis oben, praktisch für Gesundheits-Apps und Gewohnheits-Tracker.