Carte céleste d’Orion
Une carte du ciel d’Orion : chaque étoile ouvre une fiche avec magnitude, distance et type, et ses lignes de constellation s’allument.
Réglages
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>Magnitude</em>0,5</span><span class="r"><em>Distance</em>548 années-lumière</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>Magnitude</em>1,6</span><span class="r"><em>Distance</em>250 années-lumière</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>Magnitude</em>1,8</span><span class="r"><em>Distance</em>1 260 années-lumière</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>Magnitude</em>1,7</span><span class="r"><em>Distance</em>1 980 années-lumière</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>Magnitude</em>2,2</span><span class="r"><em>Distance</em>1 200 années-lumière</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>Magnitude</em>2,1</span><span class="r"><em>Distance</em>650 années-lumière</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>Magnitude</em>0,1</span><span class="r"><em>Distance</em>860 années-lumière</span></span></button><span class="tl" aria-hidden="true"><b>Orion</b><span>Carte du ciel d’hiver</span></span></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.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Une carte du ciel d’hiver centrée sur Orion et dessinée en CSS, avec une grille discrète, des étoiles de fond, une nébuleuse rose et les sept étoiles principales, chacune dimensionnée selon son éclat. Au survol ou au focus, une fiche vitrée donne la magnitude, la distance en années-lumière et le type spectral, pendant que les lignes qui la touchent s’allument grâce à :has().
La couleur principale règle les lignes mises en avant et l’anneau de focus, la secondaire le ciel nocturne. Remplace la liste par une autre constellation, une carte des planètes ou les places d’un planétarium, avec des positions en pourcentage pour que la carte s’adapte.