60 cm

3,0°Nivelado

HTML + CSSLiquid Glass

Niveau à bulle en verre

Un niveau de chantier avec sa fiole en verre : inclinez-le en glissant ou aux flèches, la bulle file avec un ressort.

Réglages

16px
1x

Code

<div class="uvq11-lvl"><div class="lv" role="slider" tabindex="0" aria-label="Inclinaison" 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>De niveau</span></p></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Liquid Glass

Voir tout : Liquid Glass

Où l’utiliser

Un niveau en aluminium jaune avec une fiole en verre très réaliste : liquide vert citron, reflets le long du tube, deux repères et une bulle d’air cernée par le bord sombre de la réfraction. La bulle file vers le côté haut avec une physique de ressort, et un afficheur donne l’angle avec une coche quand tout est de niveau. Pour des outils ou des curseurs ludiques.

La couleur de la fiole règle le liquide, celle du corps règle l’outil. Le composant se comporte comme un curseur accessible de moins douze à douze degrés : clavier, lecteur d’écran et glissement tactile fonctionnent pareil.