Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS3 मल्टी-कॉलम कॉलम-स्पैन प्रॉपर्टी

<घंटा/>

कॉलम-स्पैन प्रॉपर्टी का इस्तेमाल कॉलम के बीच स्पैन को निर्दिष्ट करने के लिए किया जाता है। आप CSS का उपयोग करके कॉलम-स्पैन प्रॉपर्टी को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं -

उदाहरण

<html>
<head>
<style>
   .multi {
      /* Column count property */
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;

      /* Column gap property */
      -webkit-column-gap: 40px;
      -moz-column-gap: 40px;
      column-gap: 40px;

      /* Column style property */
      column-rule-style: solid;
      column-rule-color: #ff00ff;

      /* Colum width property */
      -webkit-column-rule-width: 5px;
      -moz-column-rule-width: 5px;
      column-rule-width: 5px;

      /* Column span property */
      -webkit-column-span: all; /* Chrome, Safari, Opera */
      column-span: all;
   }
</style>
</head>

<body>
<div class = "multi">
<h2>This is demo text</h2>
   Tutorials Point originated from the idea that there exists a class of readers
   who respond better to online content and prefer to learn new skills at their
   own pace from the comforts of their drawing rooms. The journey commenced with
   a single tutorial on HTML in 2006 and elated by the response it generated, we
   worked our way to adding fresh tutorials to our repository which now proudly
   flaunts a wealth of tutorials and allied articles on topics ranging from
   programming languages to web designing to academics and much more.
</div>
</body>
</html>

आउटपुट

CSS3 मल्टी-कॉलम कॉलम-स्पैन प्रॉपर्टी


  1. CSS3 मल्टी-कॉलम कॉलम-नियम प्रॉपर्टी

    नियमों की संख्या निर्दिष्ट करने के लिए बहु-स्तंभ-स्तंभ-नियम गुण का उपयोग किया जाता है। आप CSS3 में कॉलम-नियम प्रॉपर्टी को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>       <style>          .mult

  1. CSS3 मल्टी-कॉलम कॉलम-गिनती संपत्ति

    CSS3 मल्टी-कॉलम कॉलम-काउंट प्रॉपर्टी का उपयोग उन कॉलमों की संख्या को गिनने के लिए किया जाता है, जिन्हें एलिमेंट को विभाजित किया जाना चाहिए। आप CSS का उपयोग करके कॉलम-काउंट प्रॉपर्टी को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>   &

  1. CSS3 ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी

    ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी हमें ट्रांज़िशन-प्रॉपर्टी, ट्रांज़िशन-अवधि, ट्रांज़िशन-टाइमिंग फ़ंक्शन और ट्रांज़िशन-देरी को एक लाइन में ट्रांज़िशन प्रॉपर्टी के मान के रूप में निर्दिष्ट करने की अनुमति देती है। CSS में ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html