column-rule-style css3
10 
Siden er opdateret d. 4. 9. 2015
Med column-rule-style kan man definere udseendet (style) på den lodrette streg mellem kolonner. Desværre er det kun Internet Explorer fra version 10, der i øjeblikket forstår koden. Ved at anvende et hack (prefix), kan Firefox (-moz-), Chrome, Opera og Safari (-webkit-) bringes med.
#style1 {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
-moz-column-rule: 3px dashed #aad; /* Firefox */
-webkit-column-rule: 3px dashed #aad; /* Chrome, Opera og Safari */
column-rule: 3px dashed #aad;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi.
#style2 {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
-moz-column-rule: 3px dotted #aad; /* Firefox */
-webkit-column-rule: 3px dotted #aad; /* Chrome, Opera og Safari */
column-rule: 3px dotted #aad;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi.
#style3 {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
-moz-column-rule: 3px double #aad; /* Firefox */
-webkit-column-rule: 3px double #aad; /* Chrome, Opera og Safari */
column-rule: 3px double #aad;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi.
#style4 {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
-moz-column-rule: 3px groove #aad; /* Firefox */
-webkit-column-rule: 3px groove #aad; /* Chrome, Opera og Safari */
column-rule: 3px groove #aad;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi.
#style5 {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
-moz-column-rule: 3px ridge #aad; /* Firefox */
-webkit-column-rule: 3px ridge #aad; /* Chrome, Opera og Safari */
column-rule: 3px ridge #aad;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi.
#style6 {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
-moz-column-rule: 3px solid #aad; /* Firefox */
-webkit-column-rule: 3px solid #aad; /* Chrome, Opera og Safari */
column-rule: 3px solid #aad;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi.
