सामग्री मार्केटिङ

CSS3 सुविधाहरू तपाईलाई थाहा नहुन सक्छ: फ्लेक्सबक्स, ग्रिड लेआउटहरू, अनुकूलन गुणहरू, ट्रान्जिसनहरू, एनिमेसनहरू, र बहुविध पृष्ठभूमिहरू

क्यास्केडिङ शैली पाना (CSS) विकसित हुन जारी राख्नुहोस् र नवीनतम संस्करणहरूमा केहि सुविधाहरू हुन सक्छ जुन तपाईलाई थाहा नहुन सक्छ। यहाँ CSS3 सँग परिचय गरिएका केही प्रमुख सुधार र विधिहरू छन्, कोड उदाहरणहरू सहित:

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

HTML

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

CSS

.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 वर्गले ग्रिड वस्तुहरूको लागि पृष्ठभूमि रङ र प्याडिङ सेट गर्दछ।

HTML

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

CSS

.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 गुण समयको साथ CSS गुणहरूमा परिवर्तनहरू एनिमेट गर्न प्रयोग गर्न सकिन्छ। यस उदाहरणमा, द .box वर्गले तत्वको लागि चौडाइ, उचाइ र प्रारम्भिक पृष्ठभूमि रङ सेट गर्छ। द transition सम्पत्ति सेट गरिएको छ background-color 0.5s ease इजि-इन-आउट टाइमिङ प्रकार्यको साथ आधा सेकेन्डमा पृष्ठभूमि रङ गुणमा परिवर्तनहरू एनिमेट गर्न। द .box:hover क्लासले ट्रान्जिसन एनिमेसन ट्रिगर गर्दै, माउस पोइन्टर माथि हुँदा तत्वको पृष्ठभूमि रङ परिवर्तन गर्छ।

HTML

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

CSS

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

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

परिणाम

होभर
यहाँ!
  • एनिमेशन: CSS3 ले वेब पृष्ठहरूमा एनिमेसनहरू सिर्जना गर्नका लागि धेरै नयाँ गुणहरू र प्रविधिहरू प्रस्तुत गर्‍यो। यस उदाहरणमा, हामीले प्रयोग गरेर एनिमेसन थपेका छौं animation सम्पत्ति। हामीले एक परिभाषित गरेका छौं @keyframes एनिमेसनको लागि नियम, जसले बक्सलाई ०.५ सेकेन्डको अवधिमा ० डिग्रीदेखि ९० डिग्रीसम्म घुमाउनुपर्छ भनेर निर्दिष्ट गर्छ। जब बक्स माथि होभर गरिएको छ, spin बक्स घुमाउन एनिमेसन लागू गरिएको छ। द animation-fill-mode सम्पत्ति सेट गरिएको छ forwards एनिमेसनको अन्तिम अवस्था यो समाप्त भएपछि राखिएको छ भनेर सुनिश्चित गर्न।

HTML

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

CSS

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

परिणाम

होभर
यहाँ!
  • CSS अनुकूलन गुणहरू: यस्तो पनि भनिन्छ CSS चलहरू, अनुकूलन गुणहरू CSS3 मा प्रस्तुत गरिएको थियो। तिनीहरूले तपाइँलाई CSS मा तपाइँको आफ्नै अनुकूलन गुणहरू परिभाषित गर्न र प्रयोग गर्न अनुमति दिन्छ, जुन तपाइँको स्टाइलसिटहरूमा मानहरू भण्डारण र पुन: प्रयोग गर्न प्रयोग गर्न सकिन्छ। CSS चरहरू दुई ड्यासहरूबाट सुरु हुने नामद्वारा पहिचान गरिन्छ, जस्तै
    --my-variable। यस उदाहरणमा, हामी -primary-color भनिने CSS चर परिभाषित गर्छौं र यसलाई मान दिन्छौं। #007bff, जुन निलो रङ हो जुन सामान्यतया धेरै डिजाइनहरूमा प्राथमिक रङको रूपमा प्रयोग गरिन्छ। हामीले यो चर सेट गर्न प्रयोग गरेका छौं background-color बटन तत्वको गुण, प्रयोग गरेर var() प्रकार्य र चर नाममा पारित। यसले बटनको लागि पृष्ठभूमि रङको रूपमा चरको मान प्रयोग गर्नेछ।
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • बहु पृष्ठभूमि: CSS3 ले तपाईंलाई एक तत्वको लागि धेरै पृष्ठभूमि छविहरू निर्दिष्ट गर्न अनुमति दिन्छ, यसको स्थिति र स्ट्याकिङ क्रम नियन्त्रण गर्ने क्षमताको साथ। पृष्ठभूमि दुई तस्बिरहरू मिलेर बनेको छ, red.pngblue.png, जुन प्रयोग गरेर लोड गरिन्छ background-image सम्पत्ति। पहिलो तस्बिर, red.png, तत्वको दायाँ तल्लो कुनामा राखिएको छ, जबकि दोस्रो छवि, blue.png, तत्वको बायाँ शीर्ष कुनामा राखिएको छ। द background-position गुण प्रत्येक छवि को स्थिति नियन्त्रण गर्न प्रयोग गरिन्छ। द background-repeat छविहरू कसरी दोहोर्याउँछन् भनेर नियन्त्रण गर्न गुण प्रयोग गरिन्छ। पहिलो तस्बिर, red.png, दोहोरिने छैन भनेर सेट गरिएको छ (no-repeat), जबकि दोस्रो छवि, blue.png, दोहोर्याउन सेट गरिएको छ (repeat).

    HTML

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

    CSS

    #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 को CMO छ OpenINSightTS र को संस्थापक Martech Zone। डगलसले दर्जनौं सफल MarTech स्टार्टअपहरूलाई मद्दत गरेको छ, Martech अधिग्रहण र लगानीमा $ 5 बिलियन भन्दा बढीको लगनशीलतामा सहयोग गरेको छ, र कम्पनीहरूलाई उनीहरूको बिक्री र मार्केटिङ रणनीतिहरू कार्यान्वयन र स्वचालित गर्न मद्दत गर्न जारी छ। डगलस एक अन्तर्राष्ट्रिय मान्यता प्राप्त डिजिटल रूपान्तरण र MarTech विशेषज्ञ र वक्ता हो। डगलस डम्मीको गाईड र व्यापार नेतृत्व पुस्तकका प्रकाशित लेखक पनि हुन्।

    सम्बन्धित लेख

    शीर्ष बटनमा फर्कनुहोस्
    बन्द

    Adblock पत्ता लाग्यो

    Martech Zone तपाइँलाई यो सामग्री कुनै पनि लागतमा उपलब्ध गराउन सक्षम छ किनभने हामीले हाम्रो साइटलाई विज्ञापन राजस्व, सम्बद्ध लिङ्कहरू, र प्रायोजनहरू मार्फत मुद्रीकरण गर्छौं। यदि तपाईंले हाम्रो साइट हेर्दै आफ्नो विज्ञापन अवरोधक हटाउनु भयो भने हामी प्रशंसा गर्नेछौं।