CSS3 की विशेषताएं जिनके बारे में आप शायद नहीं जानते होंगे: फ्लेक्सबॉक्स, ग्रिड लेआउट, कस्टम गुण, संक्रमण, एनिमेशन, और एकाधिक पृष्ठभूमि

व्यापक शैली पत्रक (सीएसएस) का विकास जारी है और नवीनतम संस्करणों में कुछ ऐसी विशेषताएं हो सकती हैं जिनके बारे में आपको जानकारी भी नहीं होगी। कोड उदाहरणों के साथ CSS3 के साथ पेश किए गए कुछ प्रमुख सुधार और कार्यप्रणाली यहां दी गई हैं:

• लचीला बॉक्स लेआउट (फ्लेक्सबॉक्स): एक लेआउट मोड जो आपको वेब पेजों के लिए लचीला और उत्तरदायी लेआउट बनाने की अनुमति देता है। फ्लेक्सबॉक्स के साथ, आप आसानी से एक कंटेनर में तत्वों को संरेखित और वितरित कर सकते हैं। n यह उदाहरण, द .container वर्ग उपयोग display: flex फ्लेक्सबॉक्स लेआउट मोड को सक्षम करने के लिए। justify-content संपत्ति पर सेट है center कंटेनर के भीतर बाल तत्व को क्षैतिज रूप से केन्द्रित करने के लिए। align-items संपत्ति पर सेट है center बाल तत्व को लंबवत रूप से केंद्रित करने के लिए। .item वर्ग बाल तत्व के लिए पृष्ठभूमि का रंग और पैडिंग सेट करता है।

<div class="container">
  <div class="item">Centered Element</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

• जाली का नक्शा: एक अन्य लेआउट मोड जो आपको वेब पेजों के लिए जटिल ग्रिड-आधारित लेआउट बनाने की अनुमति देता है। ग्रिड के साथ, आप पंक्तियों और स्तंभों को निर्दिष्ट कर सकते हैं और फिर तत्वों को ग्रिड के विशिष्ट कक्षों में रख सकते हैं। इस उदाहरण में, .grid-container वर्ग उपयोग display: grid ग्रिड लेआउट मोड को सक्षम करने के लिए। grid-template-columns संपत्ति पर सेट है repeat(2, 1fr) समान चौड़ाई के दो स्तंभ बनाने के लिए। gap गुण ग्रिड कोशिकाओं के बीच रिक्ति सेट करता है। .grid-item वर्ग ग्रिड आइटम के लिए पृष्ठभूमि रंग और पैडिंग सेट करता है।

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

• संक्रमण: CSS3 ने वेब पेजों पर ट्रांज़िशन बनाने के लिए कई नए गुण और तकनीकें पेश कीं। उदाहरण के लिए, transition संपत्ति का उपयोग समय के साथ सीएसएस गुणों में परिवर्तन को एनिमेट करने के लिए किया जा सकता है। इस उदाहरण में, .box वर्ग तत्व के लिए चौड़ाई, ऊंचाई और प्रारंभिक पृष्ठभूमि का रंग निर्धारित करता है। transition संपत्ति पर सेट है background-color 0.5s ease आसान-इन-आउट टाइमिंग फ़ंक्शन के साथ आधे सेकंड में पृष्ठभूमि रंग गुण में परिवर्तनों को एनिमेट करने के लिए। .box:hover जब माउस पॉइंटर इसके ऊपर होता है, तो क्लास तत्व की पृष्ठभूमि का रंग बदल देता है, जिससे संक्रमण एनीमेशन चालू हो जाता है।

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

• एनिमेशन: CSS3 ने वेब पेजों पर एनिमेशन बनाने के लिए कई नए गुण और तकनीकें पेश कीं। इस उदाहरण में, हमने का उपयोग करके एक एनीमेशन जोड़ा है animation संपत्ति। हमने ए परिभाषित किया है @keyframes एनीमेशन के लिए नियम, जो निर्दिष्ट करता है कि बॉक्स को 0 सेकंड की अवधि में 90 डिग्री से 0.5 डिग्री तक घूमना चाहिए। जब बॉक्स पर होवर किया जाता है, तो spin एनीमेशन बॉक्स को घुमाने के लिए लागू किया जाता है। animation-fill-mode संपत्ति पर सेट है forwards यह सुनिश्चित करने के लिए कि एनीमेशन के खत्म होने के बाद उसकी अंतिम स्थिति बनी रहे।

<div class="rotate"></div>

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

• सीएसएस कस्टम गुण: इसके अलावा के रूप में जाना सीएसएस चर, कस्टम गुण CSS3 में पेश किए गए थे। वे आपको सीएसएस में अपने स्वयं के कस्टम गुणों को परिभाषित करने और उपयोग करने की अनुमति देते हैं, जिनका उपयोग आपकी स्टाइलशीट में मूल्यों को संग्रहीत करने और पुन: उपयोग करने के लिए किया जा सकता है। CSS वेरिएबल्स को एक ऐसे नाम से पहचाना जाता है जो दो डैश से शुरू होता है, जैसे --my-variable. इस उदाहरण में, हम -प्राथमिक-रंग नामक एक सीएसएस चर को परिभाषित करते हैं और इसे एक मान देते हैं #007bff, जो एक नीला रंग है जिसे आमतौर पर कई डिजाइनों में प्राथमिक रंग के रूप में इस्तेमाल किया जाता है। हमने इस चर का उपयोग सेट करने के लिए किया है background-color एक बटन तत्व की संपत्ति, का उपयोग करके var() कार्य और चर नाम में गुजर रहा है। यह चर के मान को बटन के लिए पृष्ठभूमि रंग के रूप में उपयोग करेगा।

:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}

• एकाधिक पृष्ठभूमि: CSS3 आपको एक तत्व के लिए उसकी स्थिति और स्टैकिंग क्रम को नियंत्रित करने की क्षमता के साथ कई पृष्ठभूमि छवियों को निर्दिष्ट करने की अनुमति देता है। पृष्ठभूमि दो छवियों से बना है, red.png और blue.png, जिनका उपयोग करके लोड किया जाता है background-image संपत्ति। पहली छवि, red.png, तत्व के निचले दाएं कोने में स्थित है, जबकि दूसरी छवि, blue.png, तत्व के बाएँ शीर्ष कोने पर स्थित है। background-position संपत्ति का उपयोग प्रत्येक छवि की स्थिति को नियंत्रित करने के लिए किया जाता है। background-repeat संपत्ति का उपयोग छवियों को दोहराने के तरीके को नियंत्रित करने के लिए किया जाता है। पहली छवि, red.png, दोहराने के लिए सेट नहीं है (no-repeat), जबकि दूसरी छवि, blue.png, दोहराने के लिए सेट है (repeat).

<div id="multibackground"></div>

#multibackground {
  background-image: url(red.png), url(blue.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  height: 200px;
  width: 200px;
}