Filtros de objetivo

Filtros montados:

HTML + CSSFiltros

Filtros de lente enroscables

Enrosca filtros de cristal delante del objetivo; se apilan y la imagen suma el efecto de cada uno.

Ajustes

16px
1x

Código

<div class="uvq05-ln"><div class="lens" aria-hidden="true"><div class="gw"><div class="f1"><div class="f2"><div class="f3"><div class="f4"><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="uvq05-ln-s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3f8fd8"/><stop offset=".62" stop-color="#cbe8f7"/></linearGradient></defs><rect width="100" height="100" fill="url(#uvq05-ln-s)"/><circle cx="70" cy="32" r="9" fill="#fff4c2"/><g fill="#fff" opacity=".92"><ellipse cx="28" cy="27" rx="14" ry="5"/><ellipse cx="37" cy="23" rx="9" ry="5"/></g><rect y="62" width="100" height="38" fill="#1f6fa8"/><path d="M0 62h100" stroke="#e9f6ff" stroke-width=".8"/><path d="M8 72h22M44 82h30M70 70h18M16 90h28" stroke="#9fd2f0" stroke-width="1.2" stroke-linecap="round" opacity=".6"/><path d="M47 60V35l14 23z" fill="#fff"/><path d="M45 61h20l-4 5H48z" fill="#c8432b"/></svg></div></div></div></div><i class="gl"></i></div><i class="rg rg1" style="--t:#5b6b8a"></i><i class="rg rg2" style="--t:#3a3a3a"></i><i class="rg rg3" style="--t:#f2a65a"></i><i class="rg rg4" style="--t:#dfe6ee"></i><span class="mm">ø52</span></div><fieldset><legend>Filtros de objetivo</legend><label><input type="checkbox" checked><span class="dc" style="--t:#5b6b8a"></span><span class="nm">Polarizador</span></label><label><input type="checkbox"><span class="dc" style="--t:#3a3a3a"></span><span class="nm">Densidad neutra</span></label><label><input type="checkbox"><span class="dc" style="--t:#f2a65a"></span><span class="nm">Calentamiento</span></label><label><input type="checkbox"><span class="dc" style="--t:#dfe6ee"></span><span class="nm">Difusor</span></label><p class="ct"><span>Filtros montados:</span> <span class="n"></span></p></fieldset></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 Filtros

Ver todos: Filtros

Dónde usarlo

Los fotógrafos apilan polarizadores, densidad neutra y filtros cálidos en el objetivo, y este control hace lo mismo con casillas. Cada filtro se enrosca como un anillo moleteado con un pequeño giro, y la vista a través del cristal combina filtros CSS anidados, así que dos o tres funcionan juntos. Úsalo en editores de fotos, apps de cámara o clases de óptica.

Cambia el acento dorado y el color del barril con los controles de color, y edita la lista para añadir un filtro de niebla o uno rojo para blanco y negro. Pon tu propia foto en lugar del SVG cuando lo publiques.