सौर मंडल सीएसएस में किया गया है कई बार - बस कोडपेन खोजें! तो फिर ऐसा क्यों करें?

क्योंकि चीजें बेहतर और सरल हो जाती हैं - और अब हम सीएसएस की कुछ पंक्तियों के साथ एक उत्तरदायी सौर प्रणाली बना सकते हैं।

आइए कुछ बहुत ही बुनियादी मार्कअप से शुरुआत करें:

हम एक आदेशित सूची का उपयोग करते हैं, क्योंकि ग्रह क्रम में हैं।

इसके बाद, हम डिफ़ॉल्ट

-शैलियों को अनसेट करते हैं, और इसे ग्रिड के रूप में स्टाइल करते हैं:


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

अब, ग्रह प्रक्षेप पथ के लिए, हम "ग्रिड स्टैक" का उपयोग करने जा रहे हैं। स्थिति: निरपेक्ष, और अनुवादों के एक समूह के बजाय, हम बस स्टैक सभी ग्रिड आइटम को इसके साथ कर सकते हैं:


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

प्रति ग्रह एक --d-चर (व्यास के लिए) सेट करके, चौड़ाई: var(--d); का उपयोग करके, हमें मिलता है:



ठंडा! आइए ::after छद्म तत्व का उपयोग करके ग्रहों को जोड़ें:


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

आइए चैटजीपीटी से प्रत्येक ग्रह के लिए कुछ अच्छे रेडियल-ग्रेडेंट्स उत्पन्न करने के लिए कहें - और जब हम इस पर हों, तो हम इसे बताएं कि हम सौर मंडल बना रहे हैं और 1 और 6cqi के बीच ग्रहों के आकार के बारे में पूछें - पूरी तरह से नहीं सटीक, लेकिन अभी भी एक बड़ा, पहचानने योग्य अंतर बरकरार है:


.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;
}

और अब हमारे पास है:



विभिन्न प्रक्षेपवक्र गति वाले ग्रहों को चेतन करने के लिए, हम जोड़ते हैं:


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

ऑफ़सेट-पथ पर ध्यान दें। प्रक्षेप पथ-एनिमेशन को सरल बनाने के लिए यही कुंजी है, क्योंकि ग्रह को

1. के आकार में स्थानांतरित करने के लिए हमें बस इतना करना है:
   

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

   और यह सबकुछ है! मैंने ChatGPT से "नेप्च्यून" के आधार पर 20s की घूर्णन-गति के साथ समय की गणना करने के लिए कहा - और हमें मिला:

   ---

   निष्कर्ष

   केवल कुछ नियमों के साथ, हमने शुद्ध सीएसएस में सौर मंडल का एक सरल 2डी संस्करण बनाया। यदि आप अधिक गहराई में जाना चाहते हैं, तो आप यह कर सकते हैं:

   • वास्तविक दूरियों और आकारों का उपयोग करें (कैल्क() के साथ)
   • इसे छद्म-3डी बनाने के लिए
     में एक ट्रांसफॉर्म: रोटेटएक्स(एंगल) जोड़ें:

   

   ... और शायद ग्रहों को "फिर से समतल" करने के लिए मैट्रिक्स3डी का उपयोग करें?

   हैप्पी कोडिंग!