HTML + CSSTooltips

Sternkarte des Orion

Eine Himmelskarte des Orion: Jeder Stern öffnet eine Karte mit Helligkeit, Entfernung und Typ, und seine Sternbildlinien leuchten auf.

Einstellungen

16px
1x

Code

<div class="uvq08-sky" role="group" aria-label="Orion"><div class="ch"><svg class="ln" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><line class="a0 a1" x1="30" y1="20" x2="68" y2="25"/><line class="a0 a2" x1="30" y1="20" x2="41" y2="55"/><line class="a1 a4" x1="68" y1="25" x2="61" y2="47"/><line class="a2 a3" x1="41" y1="55" x2="51" y2="51"/><line class="a3 a4" x1="51" y1="51" x2="61" y2="47"/><line class="a2 a5" x1="41" y1="55" x2="35" y2="84"/><line class="a4 a6" x1="61" y1="47" x2="72" y2="80"/></svg><i class="bg" style="left:0.0%;top:55.2%;--d:0.14em;--o:0.49"></i><i class="bg" style="left:38.5%;top:91.2%;--d:0.12em;--o:0.46"></i><i class="bg" style="left:34.1%;top:23.7%;--d:0.13em;--o:0.31"></i><i class="bg" style="left:43.6%;top:93.3%;--d:0.14em;--o:0.45"></i><i class="bg" style="left:12.1%;top:20.8%;--d:0.13em;--o:0.70"></i><i class="bg" style="left:27.2%;top:54.3%;--d:0.21em;--o:0.36"></i><i class="bg" style="left:84.7%;top:22.7%;--d:0.15em;--o:0.63"></i><i class="bg" style="left:23.2%;top:93.2%;--d:0.16em;--o:0.59"></i><i class="bg" style="left:8.6%;top:28.2%;--d:0.20em;--o:0.73"></i><i class="bg" style="left:8.1%;top:42.3%;--d:0.19em;--o:0.73"></i><i class="bg" style="left:67.0%;top:52.9%;--d:0.15em;--o:0.47"></i><i class="bg" style="left:59.1%;top:96.3%;--d:0.09em;--o:0.74"></i><i class="bg" style="left:36.3%;top:78.3%;--d:0.18em;--o:0.75"></i><i class="bg" style="left:42.0%;top:42.2%;--d:0.18em;--o:0.55"></i><i class="bg" style="left:13.6%;top:23.7%;--d:0.16em;--o:0.62"></i><i class="bg" style="left:42.6%;top:62.2%;--d:0.21em;--o:0.61"></i><i class="bg" style="left:63.9%;top:33.7%;--d:0.11em;--o:0.52"></i><i class="bg" style="left:59.0%;top:99.1%;--d:0.15em;--o:0.49"></i><i class="bg" style="left:48.1%;top:67.3%;--d:0.12em;--o:0.57"></i><i class="bg" style="left:40.6%;top:35.2%;--d:0.16em;--o:0.70"></i><i class="bg" style="left:35.1%;top:38.5%;--d:0.14em;--o:0.59"></i><i class="bg" style="left:44.3%;top:99.8%;--d:0.20em;--o:0.59"></i><i class="bg" style="left:98.5%;top:99.1%;--d:0.12em;--o:0.44"></i><i class="bg" style="left:47.7%;top:85.8%;--d:0.21em;--o:0.72"></i><i class="bg" style="left:12.6%;top:72.1%;--d:0.12em;--o:0.41"></i><i class="bg" style="left:50.7%;top:63.4%;--d:0.19em;--o:0.71"></i><i class="bg" style="left:15.0%;top:43.5%;--d:0.17em;--o:0.75"></i><i class="bg" style="left:43.0%;top:45.9%;--d:0.19em;--o:0.40"></i><i class="bg" style="left:97.4%;top:5.0%;--d:0.20em;--o:0.67"></i><i class="bg" style="left:31.4%;top:74.4%;--d:0.12em;--o:0.56"></i><i class="bg" style="left:45.7%;top:41.4%;--d:0.09em;--o:0.39"></i><i class="bg" style="left:72.6%;top:16.5%;--d:0.13em;--o:0.54"></i><i class="bg" style="left:88.4%;top:57.4%;--d:0.21em;--o:0.60"></i><i class="bg" style="left:5.9%;top:39.6%;--d:0.14em;--o:0.53"></i><i class="nb" aria-hidden="true"></i><button type="button" class="st s0 dn hl pk" style="left:30%;top:20%;--z:1.05em;--c:#ffab73;--i:0" aria-label="Betelgeuse" aria-describedby="uvq08-sky-0"><span class="tt" role="tooltip" id="uvq08-sky-0"><b>Betelgeuse<i>M1</i></b><span class="r"><em>Helligkeit</em>0,5</span><span class="r"><em>Entfernung</em>548 Lichtjahre</span></span></button><button type="button" class="st s1 dn hr" style="left:68%;top:25%;--z:0.78em;--c:#d6e4ff;--i:1" aria-label="Bellatrix" aria-describedby="uvq08-sky-1"><span class="tt" role="tooltip" id="uvq08-sky-1"><b>Bellatrix<i>B2</i></b><span class="r"><em>Helligkeit</em>1,6</span><span class="r"><em>Entfernung</em>250 Lichtjahre</span></span></button><button type="button" class="st s2 up hc" style="left:41%;top:55%;--z:0.74em;--c:#dce8ff;--i:2" aria-label="Alnitak" aria-describedby="uvq08-sky-2"><span class="tt" role="tooltip" id="uvq08-sky-2"><b>Alnitak<i>O9</i></b><span class="r"><em>Helligkeit</em>1,8</span><span class="r"><em>Entfernung</em>1.260 Lichtjahre</span></span></button><button type="button" class="st s3 up hc" style="left:51%;top:51%;--z:0.8em;--c:#dce8ff;--i:3" aria-label="Alnilam" aria-describedby="uvq08-sky-3"><span class="tt" role="tooltip" id="uvq08-sky-3"><b>Alnilam<i>B0</i></b><span class="r"><em>Helligkeit</em>1,7</span><span class="r"><em>Entfernung</em>1.980 Lichtjahre</span></span></button><button type="button" class="st s4 up hc" style="left:61%;top:47%;--z:0.68em;--c:#dce8ff;--i:4" aria-label="Mintaka" aria-describedby="uvq08-sky-4"><span class="tt" role="tooltip" id="uvq08-sky-4"><b>Mintaka<i>O9</i></b><span class="r"><em>Helligkeit</em>2,2</span><span class="r"><em>Entfernung</em>1.200 Lichtjahre</span></span></button><button type="button" class="st s5 up hc" style="left:35%;top:84%;--z:0.74em;--c:#d6e4ff;--i:5" aria-label="Saiph" aria-describedby="uvq08-sky-5"><span class="tt" role="tooltip" id="uvq08-sky-5"><b>Saiph<i>B0</i></b><span class="r"><em>Helligkeit</em>2,1</span><span class="r"><em>Entfernung</em>650 Lichtjahre</span></span></button><button type="button" class="st s6 up hr" style="left:72%;top:80%;--z:1.05em;--c:#bcd4ff;--i:6" aria-label="Rigel" aria-describedby="uvq08-sky-6"><span class="tt" role="tooltip" id="uvq08-sky-6"><b>Rigel<i>B8</i></b><span class="r"><em>Helligkeit</em>0,1</span><span class="r"><em>Entfernung</em>860 Lichtjahre</span></span></button><span class="tl" aria-hidden="true"><b>Orion</b><span>Karte des Winterhimmels</span></span></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 Tooltips

Alle ansehen: Tooltips

Wofür du ihn nutzen kannst

Eine Winterhimmelskarte des Orion aus CSS: ein zartes Raster, verstreute Hintergrundsterne, ein rosa Nebel und die sieben Hauptsterne, jeder nach Helligkeit skaliert und in seiner Farbe getönt. Beim Hovern oder Fokussieren zeigt eine gläserne Karte Helligkeit, Entfernung in Lichtjahren und Spektraltyp, während die anliegenden Sternbildlinien per :has() aufleuchten.

Die Hauptfarbe bestimmt hervorgehobene Linien und Fokusring, die Zweitfarbe den Nachthimmel. Tausche die Liste gegen ein anderes Sternbild, eine Planetenkarte oder Plätze im Planetarium und halte die Positionen in Prozent, damit die Karte skaliert.