Filtros de objetivo

Filtros montados:

HTML + CSSFilter

Schraubfilter fürs Objektiv

Schraub Glasfilter vor das Objektiv; sie stapeln sich, und das Bild vereint die Wirkung jedes einzelnen Filters.

Einstellungen

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>Objektivfilter</legend><label><input type="checkbox" checked><span class="dc" style="--t:#5b6b8a"></span><span class="nm">Polfilter</span></label><label><input type="checkbox"><span class="dc" style="--t:#3a3a3a"></span><span class="nm">Graufilter</span></label><label><input type="checkbox"><span class="dc" style="--t:#f2a65a"></span><span class="nm">Warmfilter</span></label><label><input type="checkbox"><span class="dc" style="--t:#dfe6ee"></span><span class="nm">Weichzeichner</span></label><p class="ct"><span>Montierte Filter:</span> <span class="n"></span></p></fieldset></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 Filter

Alle ansehen: Filter

Wofür du ihn nutzen kannst

Fotografen stapeln Polfilter, Graufilter und Warmfilter vor dem Objektiv, und dieses Steuerelement macht dasselbe mit Checkboxen. Jeder Filter wird als geriffelter Ring mit einer kurzen Drehung aufgeschraubt, der Blick durchs Glas kombiniert verschachtelte CSS-Filter, sodass zwei oder drei zusammenwirken. Geeignet für Bildbearbeitung, Kamera-Apps oder Lerninhalte zur Optik.

Messingakzent und Tubusfarbe stellst du mit den Farbreglern ein, die Liste lässt sich um einen Nebelfilter oder einen Rotfilter für Schwarzweiß erweitern. Tausch beim Einsatz das SVG gegen ein eigenes Foto.