Filtros de objetivo

Filtros montados:

HTML + CSSFiltres

Filtres d'objectif à visser

Visse des filtres en verre devant l'objectif ; ils s'empilent et l'image cumule l'effet de chacun.

Réglages

16px
1x

Code

<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>Filtres d'objectif</legend><label><input type="checkbox" checked><span class="dc" style="--t:#5b6b8a"></span><span class="nm">Polariseur</span></label><label><input type="checkbox"><span class="dc" style="--t:#3a3a3a"></span><span class="nm">Gris neutre</span></label><label><input type="checkbox"><span class="dc" style="--t:#f2a65a"></span><span class="nm">Réchauffant</span></label><label><input type="checkbox"><span class="dc" style="--t:#dfe6ee"></span><span class="nm">Diffuseur</span></label><p class="ct"><span>Filtres montés :</span> <span class="n"></span></p></fieldset></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 Filtres

Voir tout : Filtres

Où l’utiliser

Les photographes empilent polariseur, filtre gris neutre et filtre chaud sur l'objectif, et ce contrôle fait pareil avec des cases à cocher. Chaque filtre se visse comme une bague moletée avec une petite rotation, et la vue à travers le verre combine des filtres CSS imbriqués, si bien que deux ou trois agissent ensemble. Pour les éditeurs photo, les applis d'appareil ou les cours d'optique.

Change l'accent doré et la couleur du fût avec les couleurs, et complète la liste avec un filtre brume ou un filtre rouge pour le noir et blanc. Remplace le SVG par ta propre photo en production.