Wednesday, February 15, 2017

CSS3 - Multi columns

CSS3 supported multi columns to arrange the text as news paper structure.
Some of most common used multi columns properties as shown below −
Values Description
column-count Used to count the number of columns that element should be divided
column-fill Used to decide, how to fill the columns
column-gap Used to decide the gap between the columns
column-rule Used to specifies the number of rules
rule-color Used to specifies the column rule color
rule-style Used to specifies the style rule for column
rule-width Used to specifies the width
column-span Used to specifies the span between columns

Example

Below example shows the arrangement of text as new paper structure.
<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 */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </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>
It will produce the following result −
For suppose, if user wants to make text as new paper without line, we can do this by removing style syntax as shown below
.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;
}
It will produce the following result −
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)