HTML + CSSOverlays

Aperçu avant impression

Une boîte d'impression dont la page miniature change de format, d'orientation, de marges et de couleur pendant les réglages.

Réglages

16px
1x

Code

<div class="uvq13-prt"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 9V3.5h10V9M7 17H4.5V9h15v8H17M7 14h10v6.5H7z"/></svg><span>Imprimer</span></button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-prt-t" tabindex="-1"><div class="pv"><div class="sheet"><div class="pc"><i class="h"></i><i></i><i></i><i class="s"></i><i class="im"></i><i></i><i></i><i class="s"></i></div><span class="mg" aria-hidden="true"></span></div><p class="pgn"><button type="button" class="pp" aria-label="Page précédente">‹</button><span><b class="cur">1</b> / <b class="tot">2</b></span><button type="button" class="np" aria-label="Page suivante">›</button></p></div><div class="op"><p class="ti" id="uvq13-prt-t">Imprimer</p><div class="f"><span class="lb" id="uvq13-prt-s">Papier</span><div class="s" role="radiogroup" aria-labelledby="uvq13-prt-s"><button type="button" role="radio" aria-checked="true" data-v="a4">A4</button><button type="button" role="radio" aria-checked="false" data-v="lt">Lettre</button></div></div><div class="f"><span class="lb" id="uvq13-prt-o">Orientation</span><div class="seg or" role="radiogroup" aria-labelledby="uvq13-prt-o"><button type="button" role="radio" aria-checked="true" data-v="p" aria-label="Portrait"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6.5" y="3.5" width="11" height="17" rx="1.5"/></svg></button><button type="button" role="radio" aria-checked="false" data-v="l" aria-label="Paysage"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="6.5" width="17" height="11" rx="1.5"/></svg></button></div></div><div class="f fm"><label class="lb" for="uvq13-prt-m">Marges</label><output>15 mm</output><input id="uvq13-prt-m" type="range" min="0" max="30" step="5"></div><button type="button" class="f tg" role="switch" aria-checked="true"><span class="lb">Couleur</span><i></i></button><div class="f"><span class="lb">Copies</span><span class="stp"><button type="button" class="dn" aria-label="Moins de copies">−</button><output class="cp">1</output><button type="button" class="up" aria-label="Plus de copies">+</button></span></div><div class="ac"><button type="button" class="cn">Annuler</button><button type="button" class="ok">Imprimer</button></div><p class="pr" aria-live="polite"><span>Envoi à l'imprimante…</span><i><b></b></i></p></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Overlays

Voir tout : Overlays

Où l’utiliser

Les boîtes d'impression sont souvent un mur d'options, celle-ci montre le résultat à côté de chaque choix. La page miniature passe de A4 à Lettre, du portrait au paysage, des repères pointillés suivent le curseur des marges, la couleur coupée grise la page et les copies s'empilent derrière. Pour une facture, un rapport ou un billet.

La couleur principale règle le texte de la page, la seconde les accents, les repères et le bouton d'impression. Relie les options à ta feuille de style d'impression ou à l'export PDF, chaque commande marche au clavier et au lecteur d'écran.