Filmrollen als Fotofilter
Wähl eine Filmdose, und das Foto ändert Farbe, Kontrast und Korn, als wäre es auf diesem Film entwickelt worden.
Einstellungen
Code
<fieldset class="uvq05-fr"><legend>Film</legend><div class="fm"><div class="ph"><svg viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="uvq05-fr-s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#6fb7e9"/><stop offset="1" stop-color="#ffd9a8"/></linearGradient></defs><rect width="200" height="120" fill="url(#uvq05-fr-s)"/><circle cx="148" cy="36" r="13" fill="#ffd25e"/><path d="M0 78L38 44L62 64L92 30L128 70L152 52L200 82V120H0Z" fill="#4f7a64"/><path d="M0 88L30 70L70 86L110 66L150 84L200 74V120H0Z" fill="#2f5446"/><rect y="94" width="200" height="26" fill="#3d8fc4"/><path d="M20 102h40M90 109h50M150 100h30" stroke="#bfe3f7" stroke-width="1.6" stroke-linecap="round" opacity=".7"/><path d="M118 85h18v9h-18z" fill="#c8432b"/><path d="M115 86l12-9 12 9z" fill="#7a2a1c"/><rect x="124" y="88" width="4" height="6" fill="#ffe2a0"/></svg><i class="tn"></i><svg class="gr" aria-hidden="true"><filter id="uvq05-fr-n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(#uvq05-fr-n)"/></svg></div></div><div class="rl"><label><input type="radio" name="uvq05-fr" checked><span class="cn" style="--b:#f2b134" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>400</b></span><i class="cp b"></i></span><span class="nm">Warm</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#2b2b2b" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>400</b></span><i class="cp b"></i></span><span class="nm">Schwarzweiß</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#2f7d4f" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>50</b></span><i class="cp b"></i></span><span class="nm">Dia</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#3a7bd5" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>200</b></span><i class="cp b"></i></span><span class="nm">Kühl</span></label><label><input type="radio" name="uvq05-fr"><span class="cn" style="--b:#c6352f" aria-hidden="true"><i class="ld"></i><i class="cp"></i><span class="bd"><b>800</b></span><i class="cp b"></i></span><span class="nm">Kunstlicht</span></label></div></fieldset>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.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Eine Filterauswahl für Bildbearbeitung und Kamera-Apps, die jeden Look als echte Filmdose mit ISO-Zahl auf dem Etikett zeigt. Die Vorschau ist eine SVG-Szene in einem Negativstreifen, jede Rolle setzt CSS-Filter, eine Soft-Light-Tönung und animiertes Korn ein. Die Auswahl ist eine Radiogruppe, die komplett in CSS gesteuert wird.
Bearbeite die Filterwerte, um eigene Looks zu bauen, zum Beispiel einen verblassten Sommer oder ein crossentwickeltes Dia. Ersetze das SVG im Einsatz durch ein echtes Bild und halte die Namen kurz, damit sie unter die Dosen passen.