सामग्री का विपणन

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

परिणाम

आइटम 1
आइटम 2
आइटम 3
आइटम 4
  • संक्रमण: 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;
    }

    परिणाम

    Douglas Karr

    Douglas Karr के सीएमओ हैं खुली अंतर्दृष्टि और के संस्थापक Martech Zone. डगलस ने दर्जनों सफल मार्टेक स्टार्टअप्स की मदद की है, मार्टेक अधिग्रहणों और निवेशों में $5 बिलियन से अधिक की उचित परिश्रम में सहायता की है, और कंपनियों को उनकी बिक्री और विपणन रणनीतियों को लागू करने और स्वचालित करने में सहायता करना जारी रखा है। डगलस एक अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त डिजिटल परिवर्तन और मार्टेक विशेषज्ञ और वक्ता हैं। डगलस डमी गाइड और बिजनेस लीडरशिप पुस्तक के प्रकाशित लेखक भी हैं।

    संबंधित आलेख

    शीर्ष पर वापस करने के लिए बटन
    समापन

    पता लगाया गया

    Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।