CSS Beginners Guide part 15 - Multiple Columns | Lessoncup Programming Blog

Friday, 1 November 2013

CSS Beginners Guide part 15 - Multiple Columns

CSS Multiple Column, web designers must aware of this because this feature save a lot of time, this feature divide the single text layout into multiple layouts, we can set the gap between dividing layouts using column-gap property and we set the rules to column gaps like width, height, and color using column-rule.

Managing the Columns
the column-count property is used to specify the number of to element divided into, we can specify the gap between columns using column-gap and we can set the rule to columns using column-rule.

// the text div divided into 3 parts


-ms-transform: 3; // IE Browser
-webkit-transform: 3; // for Safari and Chrome
-moz-transform: 3; // for Mozilla
-o-transform: 3; // for Opera

//creating gap between columns

-ms-transform: 30px; // IE Browser
-webkit-transform: 30px; // for Safari and Chrome
-moz-transform: 30px; // for Mozilla
-o-transform: 30px; // for Opera

//creating rule to columns

column-rule:5px outset #ff0;;
-ms-transform: 5px outset #ff0; // IE Browser
-webkit-transform: 5px outset #ff0; // for Safari and Chrome
-moz-transform: 5px outset #ff0; // for Mozilla
-o-transform: 5px outset #ff0; // for Opera





put some big text here


No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons