Agua de hoy

3/8

vasos

HTML + CSSLiquid Glass

Vaso de agua con pajita

Un contador de agua: el nivel sube con cada toque y la pajita y las rayas se ven quebradas dentro del agua.

Ajustes

16px
1x

Código

<div class="uvq11-wg" style="--lv:.375"><div class="gs"><i class="s1" aria-hidden="true"></i><button type="button" class="tb" aria-label="Añadir un vaso"><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">Agua de hoy</p><p class="ct"><output class="n">3</output><span>/8</span></p><p class="un">vasos</p><div class="bt"><button type="button" class="ch mn" aria-label="Quitar un vaso"><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="Añadir un vaso"><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 para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Liquid Glass

Ver todos: Liquid Glass

Dónde usarlo

Un registro de hidratación construido alrededor de un vaso de cristal en CSS. Detrás hay una pared de rayas y, dentro del agua, las rayas se ven más anchas y desplazadas mientras la pajita parece partirse en la superficie, la refracción de siempre en cualquier mesa. Cada vaso añadido entra con un chorro, un vaivén del menisco y burbujas.

Cambia el color del agua y de la pajita, renombra la etiqueta y usa los botones de más y menos o toca el propio vaso. Con ocho vasos se llena hasta arriba, útil en apps de salud y seguimiento de hábitos.