Película
HTML + CSSFiltros

Carretes de película

Elige un carrete y la foto cambia de color, contraste y grano como si la hubieras revelado con esa película.

Ajustes

16px
1x

Código

<fieldset class="uvq05-fr"><legend>Película</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">Cálida</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">Blanco y negro</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">Diapositiva</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">Fría</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">Tungsteno</span></label></div></fieldset>

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

Un selector de filtros para editores de fotos y apps de cámara que muestra cada estilo como un carrete real con su ISO en la etiqueta. La vista previa es una escena SVG dentro de una tira de negativo, y cada carrete aplica filtros CSS, un tinte en luz suave y un grano animado. La selección es un grupo de radios resuelto solo con CSS.

Edita los filtros para crear tus propios estilos, como un verano desvaído o una diapositiva forzada. Cambia el SVG por una imagen real cuando lo uses en producción y deja nombres cortos para que quepan bajo cada carrete.