HTML + CSSTooltips

Atlas lunar con cráteres y mares

La cara visible de la Luna con sus mares y cráteres marcados: cada uno se rodea a su tamaño y abre su ficha.

Ajustes

16px
1x

Código

<div class="uvq08-mon" role="group" aria-label="Cara visible de la Luna"><p class="hd" aria-hidden="true">Cara visible de la Luna</p><div class="mn"><button type="button" class="ft f0 dn pk" style="left:63%;top:47%;--s:17%" aria-label="Mar de la Tranquilidad" aria-describedby="uvq08-mon-0"><span class="tt" role="tooltip" id="uvq08-mon-0"><b>Mar de la Tranquilidad</b><code>Mar · 873 km</code><span>Aquí aterrizó el Apolo 11 en 1969</span></span></button><button type="button" class="ft f1 dn" style="left:58%;top:30%;--s:14%" aria-label="Mar de la Serenidad" aria-describedby="uvq08-mon-1"><span class="tt" role="tooltip" id="uvq08-mon-1"><b>Mar de la Serenidad</b><code>Mar · 707 km</code><span>Lava basáltica lisa y oscura</span></span></button><button type="button" class="ft f2 dn" style="left:36%;top:30%;--s:22%" aria-label="Mar de las Lluvias" aria-describedby="uvq08-mon-2"><span class="tt" role="tooltip" id="uvq08-mon-2"><b>Mar de las Lluvias</b><code>Mar · 1.146 km</code><span>El mayor mar de la cara visible</span></span></button><button type="button" class="ft f3 up" style="left:33%;top:53%;--s:7%" aria-label="Copérnico" aria-describedby="uvq08-mon-3"><span class="tt" role="tooltip" id="uvq08-mon-3"><b>Copérnico</b><code>Cráter · 93 km</code><span>Sus rayos brillan con luna llena</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>Cráter · 85 km</code><span>Joven: unos 108 millones de años</span></span></button></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Tooltips

Ver todos: Tooltips

Dónde usarlo

Una Luna hecha solo con degradados de CSS superpuestos: mares oscuros, cráteres brillantes, los rayos tenues de Tycho y una sombra suave en el borde, sobre una tarjeta con estrellas. Cinco accidentes son botones con el tamaño que tienen en el disco. Pasa o enfoca uno y un anillo discontinuo lo rodea mientras una etiqueta de atlas da su nombre, tipo, diámetro y un dato breve.

El color principal define los anillos y la línea de datos, y el secundario la noche alrededor de la Luna. Añade cráteres dando a cada uno su posición y su tamaño en porcentaje, o adapta la idea a un planeta, un asteroide o una pieza de museo.