60 cm

3,0°Nivelado

HTML + CSSLiquid Glass

Nivel de burbuja de cristal

Un nivel de obra con su tubo de vidrio: inclínalo arrastrando o con las flechas y la burbuja corre con efecto muelle.

Ajustes

16px
1x

Código

<div class="uvq11-lvl"><div class="lv" role="slider" tabindex="0" aria-label="Inclinación" aria-valuemin="-12" aria-valuemax="12" aria-valuenow="3" aria-valuetext="3,0°"><i class="cap l"></i><span class="br">60 cm</span><span class="wd"><span class="vi"><i class="mk"></i><i class="bu"></i></span></span><i class="cap r"></i></div><p class="ro"><b>3,0°</b><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Nivelado</span></p></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 nivel de aluminio amarillo con una ampolla de vidrio muy realista: líquido verde lima, brillos a lo largo del tubo, dos líneas de referencia y una burbuja de aire con el borde oscuro de la refracción. La burbuja corre con física de muelle hacia el lado alto y una lectura muestra el ángulo y una marca al quedar nivelado. Encaja en herramientas, pantallas de calibración y deslizadores con gracia.

Usa el color de la ampolla para el líquido y el del cuerpo para la herramienta. Funciona como un deslizador accesible de menos doce a doce grados, así que teclado, lector de pantalla y arrastre táctil responden igual.