Mondatlas mit Kratern und Meeren
Die Vorderseite des Mondes mit markierten Meeren und Kratern: Jeder bekommt einen Ring in seiner echten Größe und öffnet seine Karte.
Einstellungen
Code
<div class="uvq08-mon" role="group" aria-label="Vorderseite des Mondes"><p class="hd" aria-hidden="true">Vorderseite des Mondes</p><div class="mn"><button type="button" class="ft f0 dn pk" style="left:63%;top:47%;--s:17%" aria-label="Meer der Ruhe" aria-describedby="uvq08-mon-0"><span class="tt" role="tooltip" id="uvq08-mon-0"><b>Meer der Ruhe</b><code>Mare · 873 km</code><span>Hier landete 1969 Apollo 11</span></span></button><button type="button" class="ft f1 dn" style="left:58%;top:30%;--s:14%" aria-label="Meer der Heiterkeit" aria-describedby="uvq08-mon-1"><span class="tt" role="tooltip" id="uvq08-mon-1"><b>Meer der Heiterkeit</b><code>Mare · 707 km</code><span>Glatte, dunkle Basaltlava</span></span></button><button type="button" class="ft f2 dn" style="left:36%;top:30%;--s:22%" aria-label="Regenmeer" aria-describedby="uvq08-mon-2"><span class="tt" role="tooltip" id="uvq08-mon-2"><b>Regenmeer</b><code>Mare · 1.146 km</code><span>Das größte Meer der Vorderseite</span></span></button><button type="button" class="ft f3 up" style="left:33%;top:53%;--s:7%" aria-label="Kopernikus" aria-describedby="uvq08-mon-3"><span class="tt" role="tooltip" id="uvq08-mon-3"><b>Kopernikus</b><code>Krater · 93 km</code><span>Seine Strahlen leuchten bei Vollmond</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>Krater · 85 km</code><span>Jung: etwa 108 Millionen Jahre</span></span></button></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.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Ein Mond ganz aus geschichteten CSS-Verläufen: dunkle Maria, helle Krater, die zarten Strahlen von Tycho und ein weicher Randschatten auf einer Karte mit Sternen. Fünf Formationen sind Buttons in ihrer echten Ausdehnung auf der Scheibe. Beim Hovern oder Fokussieren legt sich ein gestrichelter Ring darum, und ein Atlas-Etikett nennt Name, Art, Durchmesser und eine kurze Tatsache.
Die Hauptfarbe bestimmt Ringe und Datenzeile, die Zweitfarbe die Nacht um den Mond. Füge Krater hinzu, indem du jedem Position und Größe in Prozent gibst, oder übertrage die Idee auf einen Planeten, einen Asteroiden oder ein Museumsobjekt.