50 mm

f/2.8
HTML + CSSLiquid Glass

Kameraobjektiv mit Blende

Die Frontlinse eines 50-mm-Objektivs mit Mehrschicht-Reflexen; wähl eine Blendenzahl und die Lamellen schließen sich.

Einstellungen

16px
1x

Code

<div class="uvq11-lens" style="--bk:.5"><div class="ln" aria-hidden="true"><svg class="tx" viewBox="0 0 200 200"><defs><path id="uvq11-lens-p" d="M100 100m-80 0a80 80 0 1 1 160 0a80 80 0 1 1-160 0"/></defs><text><textPath href="#uvq11-lens-p">AIMRAN · 50 mm · 1:1.4 · Ø58 · AIMRAN · 50 mm · 1:1.4 · Ø58 ·</textPath></text></svg><div class="gl"><svg class="ir" viewBox="-50 -50 100 100"><path class="bl" fill-rule="evenodd" d="M-50 0a50 50 0 1 0 100 0a50 50 0 1 0-100 0ZM22.50 13.34L3.60 25.91L-18.02 18.97L-26.07 -2.26L-14.49 -21.79L8.00 -24.91L24.46 -9.28Z"/><path class="ed" d="M22.50 13.34L-10.64 48.86M3.60 25.91L-44.83 22.15M-18.02 18.97L-45.26 -21.24M-26.07 -2.26L-11.62 -48.63M-14.49 -21.79L30.78 -39.40M8.00 -24.91L50.00 -0.50M24.46 -9.28L31.57 38.78"/></svg><i class="ct"></i><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="sb"></i></div></div><div class="pn"><p class="fm">50 mm</p><output class="fv">f/2.8</output><div class="vf" aria-hidden="true"><i style="--x:8%;--y:26%;--c:#ffd166;--z:1.08"></i><i style="--x:19%;--y:72%;--c:#ff6b6b;--z:1.18"></i><i style="--x:44%;--y:20%;--c:#7bdff2;--z:0.67"></i><i style="--x:43%;--y:46%;--c:#ffd166;--z:1.00"></i><i style="--x:48%;--y:36%;--c:#f7aef8;--z:0.89"></i><i style="--x:72%;--y:15%;--c:#b8f2e6;--z:0.64"></i><i style="--x:46%;--y:58%;--c:#ffe8a3;--z:1.05"></i><b></b></div><div class="ap" role="radiogroup" aria-label="Blende"><label><input type="radio" name="uvq11-lens-ap" value="1.4"><span>f/1.4</span></label><label><input type="radio" name="uvq11-lens-ap" value="2"><span>f/2</span></label><label><input type="radio" name="uvq11-lens-ap" value="2.8" checked><span>f/2.8</span></label><label><input type="radio" name="uvq11-lens-ap" value="4"><span>f/4</span></label><label><input type="radio" name="uvq11-lens-ap" value="8"><span>f/8</span></label><label><input type="radio" name="uvq11-lens-ap" value="16"><span>f/16</span></label></div></div></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

Ein Objektiv von vorn: gerändelter Fokusring, gravierte Beschriftung auf einem SVG-Textpfad und eine tiefe Frontlinse mit violetten und grünen Vergütungsreflexen. Eine Irisblende mit sieben Lamellen, in SVG gezeichnet, öffnet und schließt sich weich, die Reflexe wandern mit dem Zeiger, und ein kleiner Sucher zeigt, wie das Bokeh beim Abblenden schrumpft.

Mit den beiden Farben tönst du die Vergütung und die gewählte Option. Die Blendenwerte sind native Radiobuttons, Pfeiltasten funktionieren also, und der Block passt zu Fotokursen, Kamerashops oder einem Einstellungsbereich mit Charakter.