HTML + CSSLiquid Glass

Mampara de vidrio acanalado

Una mampara de vidrio estriado que parte el salón en franjas reflejadas; deslízala con el tirador y frena con inercia.

Ajustes

16px
1x
0.42

Código

<div class="uvq11-reed" style="--px:2em"><div class="sc" aria-hidden="true"></div><div class="pn"><div class="fl" aria-hidden="true"><span style="--i:0"><i></i></span><span style="--i:1"><i></i></span><span style="--i:2"><i></i></span><span style="--i:3"><i></i></span><span style="--i:4"><i></i></span><span style="--i:5"><i></i></span><span style="--i:6"><i></i></span><span style="--i:7"><i></i></span><span style="--i:8"><i></i></span><span style="--i:9"><i></i></span><span style="--i:10"><i></i></span><span style="--i:11"><i></i></span><span style="--i:12"><i></i></span><span style="--i:13"><i></i></span><span style="--i:14"><i></i></span><span style="--i:15"><i></i></span><span style="--i:16"><i></i></span><span style="--i:17"><i></i></span><span style="--i:18"><i></i></span><span style="--i:19"><i></i></span></div><span class="fr" aria-hidden="true"></span><span class="hd" role="slider" tabindex="0" aria-label="Mampara de vidrio" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" aria-valuetext="20 %"></span></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

El vidrio acanalado, la tendencia de interiorismo del momento, rehecho en CSS. El panel está formado por veinte franjas estrechas y cada una lleva una copia del salón comprimida y volteada sobre su propio centro, así que la lámpara y las plantas se rompen en cintas igual que tras un vidrio estriado. Un brillo repetido da a cada estría su volumen.

Arrastra el panel o usa el tirador como deslizador con las flechas; si lo sueltas con impulso, sigue deslizándose y rebota suave en los extremos. Cambia la compresión de las estrías y los colores de lámpara y planta para webs de interiorismo, hoteles o arquitectura.