50 mm

f/2.8
HTML + CSSLiquid Glass

Objetivo de cámara con diafragma

La lente frontal de un 50 mm con reflejos de tratamiento multicapa; elige el número f y el diafragma se cierra.

Ajustes

16px
1x

Código

<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="Apertura"><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 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 objetivo visto de frente: anillo de enfoque moleteado, rotulación grabada sobre un trazado de texto SVG y una lente frontal profunda con reflejos morados y verdes del tratamiento. Un diafragma de siete láminas dibujado en SVG se abre y se cierra con suavidad, los reflejos se mueven con el puntero y un pequeño visor muestra cómo encoge el bokeh al cerrar.

Usa los dos colores para teñir los tratamientos y la opción elegida. Los números f son botones de radio nativos, así que las flechas funcionan, y el bloque encaja en cursos de fotografía, tiendas de cámaras o un panel de ajustes con carácter.