Carta estelar de Orión
Una carta del cielo de Orión: cada estrella abre su ficha con magnitud, distancia y tipo, y se iluminan sus líneas.
Ajustes
Código
<div class="uvq08-sky" role="group" aria-label="Orión"><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>Magnitud</em>0,5</span><span class="r"><em>Distancia</em>548 años luz</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>Magnitud</em>1,6</span><span class="r"><em>Distancia</em>250 años luz</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>Magnitud</em>1,8</span><span class="r"><em>Distancia</em>1.260 años luz</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>Magnitud</em>1,7</span><span class="r"><em>Distancia</em>1.980 años luz</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>Magnitud</em>2,2</span><span class="r"><em>Distancia</em>1.200 años luz</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>Magnitud</em>2,1</span><span class="r"><em>Distancia</em>650 años luz</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>Magnitud</em>0,1</span><span class="r"><em>Distancia</em>860 años luz</span></span></button><span class="tl" aria-hidden="true"><b>Orión</b><span>Carta del cielo de invierno</span></span></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.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Una carta del cielo de invierno con Orión dibujada en CSS: una cuadrícula tenue, estrellas de fondo, una nebulosa rosada y las siete estrellas principales, cada una con su tamaño según el brillo y su color. Pasa o enfoca una estrella y una ficha de cristal muestra su magnitud, la distancia en años luz y el tipo espectral, mientras se iluminan con :has() las líneas que la tocan.
El color principal define las líneas resaltadas y el anillo de foco, y el secundario el cielo nocturno. Cambia la lista por otra constelación, un mapa de planetas o los asientos de un planetario, con posiciones en porcentaje para que la carta escale.