Editar foto
Curseur à lentille liquide
Pendant le glissement, le bouton blanc devient une lentille de verre qui grossit la barre ; il règle luminosité et chaleur.
Réglages
Code
<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">Modifier la photo</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="Brillance" 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="Chaleur" 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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Un curseur dans l’esprit des interfaces mobiles les plus récentes : au repos, le bouton est une pilule blanche et, quand on le fait glisser, il gonfle en une lentille transparente aux franges colorées qui grossit la barre en dessous. Deux curseurs dans un panneau de verre règlent la luminosité et la chaleur d’une photo de paysage.
Le grossissement de la lentille a son propre réglage et la couleur de remplissage suit la couleur principale. Chaque curseur se pilote entièrement au clavier, touches Début, Fin et page comprises, pour un éditeur photo, des réglages ou une appli multimédia.