Arrastra para encuadrar
Recadrage de photo de profil
Un éditeur sombre à masque rond : glisse pour cadrer, zoome et fais pivoter, les petits aperçus suivent en direct.
Réglages
Code
<div class="uvq13-crp"><div class="pf"><span class="pv cur" aria-hidden="true"><i class="im"></i></span><span class="who"><b>Ana Torres</b><small>Architecte d'intérieur</small></span><button type="button" class="fire" aria-haspopup="dialog">Changer de photo</button></div><div class="ln" aria-hidden="true"><i></i><i></i><i class="s"></i></div><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-crp-t"><header><b id="uvq13-crp-t">Recadrer la photo</b><span class="pvs" aria-hidden="true"><span class="pv p1"><i class="im"></i></span><span class="pv p2"><i class="im"></i></span></span></header><div class="ar" tabindex="0" role="group" aria-label="Zone de recadrage" aria-describedby="uvq13-crp-h"><i class="im"></i><i class="mk"></i></div><p class="hn" id="uvq13-crp-h">Glisse pour cadrer</p><div class="zm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2M8.5 11h5"/></svg><input type="range" min="100" max="300" step="1" aria-label="Zoom"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2M8.5 11h5M11 8.5v5"/></svg><button type="button" class="rt" aria-label="Pivoter de 90 degrés"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3M4.5 4v4h4"/></svg></button></div><div class="ac"><button type="button" class="cn">Annuler</button><button type="button" class="ok">Enregistrer la photo</button></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 Overlays
Voir tout : OverlaysOù l’utiliser
Envoyer une photo de profil se termine souvent par un recadrage, et cette modale le rend agréable. La photo passe sous un masque circulaire à l'extérieur assombri, une grille des tiers apparaît pendant le glissement, et le curseur de zoom, la molette et un bouton de rotation changent le cadrage. Deux petits aperçus ronds montrent le rendu dans les listes. Pour une inscription, des réglages ou un annuaire d'équipe.
La couleur principale est le bouton d'enregistrement et l'anneau de focus, la seconde le fond de l'éditeur. L'image ne laisse jamais de vide dans le cercle, les flèches et les touches plus et moins marchent au clavier, et l'enregistrement reporte le cadrage sur l'avatar de la page.