Editar foto
Deslizador con lente líquida
Al arrastrar, el tirador blanco se convierte en una lente de cristal que aumenta la barra; regula brillo y calidez de la foto.
Ajustes
Código
<div class="uvq11-lsl" style="--br:.7;--wm:.35"><div class="ph" aria-hidden="true"><i class="sun"></i><i class="m1"></i><i class="m2"></i><i class="lk"></i></div><div class="pn"><p class="ti">Editar foto</p><div class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></svg><div class="sl" role="slider" tabindex="0" aria-label="Brillo" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" aria-valuetext="70 %" data-k="br" style="--v:0.7"><span class="tk"><span class="fi"></span></span><span class="th"><span class="lz"><span class="tc"><span class="fi"></span></span></span></span></div><output>70</output></div><div class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14.5V5a2 2 0 0 1 4 0v9.5a4 4 0 1 1-4 0z"/><path d="M12 10v6"/></svg><div class="sl" role="slider" tabindex="0" aria-label="Calidez" aria-valuemin="0" aria-valuemax="100" aria-valuenow="35" aria-valuetext="35 %" data-k="wm" style="--v:0.35"><span class="tk"><span class="fi"></span></span><span class="th"><span class="lz"><span class="tc"><span class="fi"></span></span></span></span></div><output>35</output></div></div></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.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Un deslizador al estilo de las interfaces de móvil más recientes: en reposo el tirador es una píldora blanca y, al arrastrarlo, se hincha hasta ser una lente transparente con bordes de color que aumenta la barra de debajo. Hay dos dentro de un panel de cristal y regulan el brillo y la calidez de una foto de paisaje.
Ajusta el aumento de la lente con su propio control y el color de relleno con el color principal. Cada deslizador funciona entero con teclado, incluidas Inicio, Fin y avance de página, así que encaja en editores de fotos, ajustes y apps multimedia.