HTML + CSSInfo-bulles

Atlas lunaire des cratères et des mers

La face visible de la Lune et ses mers et cratères : chacun s’entoure d’un anneau à sa taille et ouvre sa fiche.

Réglages

16px
1x

Code

<div class="uvq08-mon" role="group" aria-label="Face visible de la Lune"><p class="hd" aria-hidden="true">Face visible de la Lune</p><div class="mn"><button type="button" class="ft f0 dn pk" style="left:63%;top:47%;--s:17%" aria-label="Mer de la Tranquillité" aria-describedby="uvq08-mon-0"><span class="tt" role="tooltip" id="uvq08-mon-0"><b>Mer de la Tranquillité</b><code>Mer · 873 km</code><span>Apollo 11 s’y est posé en 1969</span></span></button><button type="button" class="ft f1 dn" style="left:58%;top:30%;--s:14%" aria-label="Mer de la Sérénité" aria-describedby="uvq08-mon-1"><span class="tt" role="tooltip" id="uvq08-mon-1"><b>Mer de la Sérénité</b><code>Mer · 707 km</code><span>Lave basaltique lisse et sombre</span></span></button><button type="button" class="ft f2 dn" style="left:36%;top:30%;--s:22%" aria-label="Mer des Pluies" aria-describedby="uvq08-mon-2"><span class="tt" role="tooltip" id="uvq08-mon-2"><b>Mer des Pluies</b><code>Mer · 1 146 km</code><span>La plus grande mer de la face visible</span></span></button><button type="button" class="ft f3 up" style="left:33%;top:53%;--s:7%" aria-label="Copernic" aria-describedby="uvq08-mon-3"><span class="tt" role="tooltip" id="uvq08-mon-3"><b>Copernic</b><code>Cratère · 93 km</code><span>Ses rayons brillent à la pleine lune</span></span></button><button type="button" class="ft f4 up" style="left:45%;top:81%;--s:6%" aria-label="Tycho" aria-describedby="uvq08-mon-4"><span class="tt" role="tooltip" id="uvq08-mon-4"><b>Tycho</b><code>Cratère · 85 km</code><span>Jeune : environ 108 millions d’années</span></span></button></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 Info-bulles

Voir tout : Info-bulles

Où l’utiliser

Une Lune faite uniquement de dégradés CSS superposés : mers sombres, cratères lumineux, rayons discrets de Tycho et ombre douce sur le bord, sur une carte étoilée. Cinq reliefs sont des boutons à leur taille réelle sur le disque. Au survol ou au focus, un anneau en pointillés l’entoure pendant qu’une étiquette d’atlas donne son nom, son type, son diamètre et un fait marquant.

La couleur principale règle les anneaux et la ligne de données, la secondaire la nuit autour de la Lune. Ajoute des cratères en donnant à chacun sa position et sa taille en pourcentage, ou adapte l’idée à une planète, un astéroïde ou un objet de musée.