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

CSS3 मल्टी-कॉलम column-fill प्रॉपर्टी


CSS3 मल्टी-कॉलम column-fill प्रॉपर्टी का उपयोग यह तय करने के लिए किया जाता है कि कॉलम्स को कैसे भरा जाए।

उदाहरण

column-fill प्रॉपर्टी लागू करने के लिए निम्नलिखित कोड आज़माएं:

<html>    <head>       <style>          .multi {             /* कॉलम काउंट प्रॉपर्टी */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;             /* कॉलम गैप प्रॉपर्टी */             -webkit-column-gap: 40px;             -moz-column-gap: 40px;             column-gap: 40px;             /* कॉलम स्टाइल प्रॉपर्टी */             -webkit-column-rule-style: solid;             -moz-column-rule-style: solid;             column-rule-style: solid;             column-fill: auto;          }       </style>    </head>    <body>       <div class = "multi">          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 मल्टी-कॉलम column-fill प्रॉपर्टी


  1. CSS3 मल्टी-कॉलम column-rule प्रॉपर्टी CSS3 मल्टी-कॉलम column-rule प्रॉपर्टी

    मल्टी-कॉलम column-rule प्रॉपर्टी का उपयोग नियमों की संख्या निर्दिष्ट करने के लिए किया जाता है। CSS3 में column-rule प्रॉपर्टी लागू करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html>    <head>       <style>          .multi {   &

  1. CSS3 मल्टी-कॉलम column-count प्रॉपर्टी CSS3 मल्टी-कॉलम column-count प्रॉपर्टी

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

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

    ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी हमें transition-property, transition-duration, transition-timing function और transition-delay को एक लाइन में transition प्रॉपर्टी के मान के रूप में निर्दिष्ट करने की अनुमति देती है।CSS में ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी का कोड निम्न है -उदाहरण<!DOCTYPE html> <