Ana TorresDiseñadora de interiores
HTML + CSSOverlays

Profilfoto im Modal zuschneiden

Ein dunkler Editor mit runder Maske: ziehen zum Ausrichten, zoomen und drehen, die kleinen Vorschauen ändern sich sofort.

Einstellungen

16px
1x

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>Innenarchitektin</small></span><button type="button" class="fire" aria-haspopup="dialog">Foto ändern</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">Foto zuschneiden</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="Zuschnittbereich" aria-describedby="uvq13-crp-h"><i class="im"></i><i class="mk"></i></div><p class="hn" id="uvq13-crp-h">Ziehen zum Ausrichten</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="Um 90 Grad drehen"><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">Abbrechen</button><button type="button" class="ok">Foto speichern</button></div></div></div>

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Wer ein Profilbild hochlädt, landet meist bei einem Zuschnitt, und dieses Modal macht ihn angenehm. Das Foto liegt unter einer runden Maske mit abgedunkeltem Außenbereich, beim Ziehen erscheint ein Drittelraster, und Zoomregler, Mausrad und ein Drehknopf ändern den Ausschnitt. Zwei kleine runde Vorschauen zeigen, wie es in Listen aussieht. Passt zu Registrierungen, Einstellungen und Teamverzeichnissen.

Die Hauptfarbe ist der Speichern-Button und der Fokusring, die zweite der Hintergrund des Editors. Das Bild lässt keine Lücke im Kreis, Pfeile sowie Plus und Minus funktionieren per Tastatur, und Speichern überträgt den Ausschnitt auf den Avatar der Seite.