60 cm

3,0°Nivelado

HTML + CSSLiquid Glass

Wasserwaage mit Glaslibelle

Eine Wasserwaage mit Glaslibelle: neig sie per Ziehen oder Pfeiltasten, und die Blase federt hinüber.

Einstellungen

16px
1x

Code

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

Eine gelbe Alu-Wasserwaage mit realistischer Glaslibelle: limettengrüne Flüssigkeit, Glanzlichter entlang der Röhre, zwei Markierungen und eine Luftblase mit dunklem Brechungsrand. Die Blase wandert mit Federphysik zur höheren Seite, eine Anzeige nennt den Winkel und zeigt ein Häkchen, sobald alles waagerecht ist. Passt zu Werkzeugen, Kalibrierungsansichten und verspielten Slidern.

Die Libellenfarbe bestimmt die Flüssigkeit, die Gehäusefarbe das Werkzeug selbst. Das Bauteil verhält sich wie ein barrierefreier Slider von minus zwölf bis zwölf Grad, Tastatur, Screenreader und Touch funktionieren gleichermaßen.