Agua de hoy

3/8

vasos

HTML + CSSLiquid Glass

Wasserglas mit Strohhalm

Ein Trinkzähler: Der Pegel steigt mit jedem Tipp, und Strohhalm und Streifen wirken im Wasser gebrochen.

Einstellungen

16px
1x

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Liquid Glass

Alle ansehen: Liquid Glass

Wofü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.