Le système solaire a été réalisé en CSS de nombreuses fois – il suffit de rechercher Codepen ! Alors pourquoi recommencer ?

Parce que les choses s'améliorent et sont plus simples — et que nous pouvons désormais créer un système solaire responsive avec seulement quelques lignes de CSS.

Commençons par un balisage très basique :

Nous utilisons une liste ordonnée, car les planètes sont dans l'ordre.

Ensuite, nous supprimons les styles

par défaut et les stylisons sous forme de grille :


ol {
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  width: 100%;
}

Maintenant, pour les trajectoires des planètes, nous allons utiliser une "pile de grille". Au lieu de position : absolue et d'un tas de traductions, nous pouvons simplement empiler tous les éléments de la grille avec :


li {
  grid-area: 1 / -1;
  place-self: center;
}

En définissant une variable --d (pour le diamètre) par planète, en utilisant width: var(--d);, nous obtenons :



Cool! Ajoutons les planètes en utilisant un pseudo-élément ::after :


li::after {
  aspect-ratio: 1 / 1;
  background: var(--b);
  border-radius: 50%;
  content: '';
  display: block;
  width: var(--w, 2cqi);
}

Demandons à ChatGPT de générer de jolis gradients radiaux pour chaque planète - et pendant que nous y sommes, disons que nous créons le système solaire et demandons des tailles planétaires comprises entre 1 et 6cqi - pas complètement précis, mais conservant toujours une différence importante et reconnaissable :


.mercury {
  --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
  --w: 2.0526cqi;
}

.venus {
  --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
  --w: 2.6053cqi;
}

.earth {
  --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
  --w: 3.1579cqi;
}

.mars {
  --b: radial-gradient(circle, #e57373 0%, #af4448 100%);
  --w: 3.7105cqi;
}

.jupiter {
  --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
  --w: 4.8158cqi;
}

.saturn {
  --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
  --w: 5.3684cqi;
}

.uranus {
  --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
  --w: 4.2632cqi;
}

.neptune {
  --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
  --w: 6cqi;
}

Et maintenant nous avons :



Pour animer les planètes avec différentes vitesses de trajectoire, nous ajoutons :


li::after {
  /* previous styles */
  animation: rotate var(--t, 3s) linear infinite;
  offset-path: content-box;
}

Remarquez le chemin de décalage. C'est la clé pour simplifier les animations de trajectoire, car tout ce que nous avons à faire pour déplacer la planète le long de la forme du

1. est ceci :
   

   @keyframes rotate {
     to {
       offset-distance: 100%;
     }
   }
   

   Et c'est tout ! J'ai demandé à ChatGPT de calculer les timings basés sur "Neptune", avec une vitesse de rotation de 20 s — et nous obtenons :

   ---

   Conclusion

   Avec seulement quelques règles, nous avons créé une version simple en 2D du système solaire en CSS pur. Si vous souhaitez approfondir, vous pouvez :

   • utiliser des distances et des tailles réelles (avec calc())
   • ajoutez une transformation : rotateX(angle) au
     pour le rendre pseudo-3D :

   

   ... et peut-être utiliser Matrix3d ​​pour "réaplatir" les planètes ?

   Bon codage !