column-rule css3
10 
Siden er opdateret d. 4. 9. 2015
Med column-rule kan man sætte en lodret 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.
#demo {
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-rule: 1px solid #000; /* Firefox */
-webkit-column-rule: 1px solid #000; /* Safari og Chrome */
column-rule: 1px solid #000;
}
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. In hac habitasse platea dictumst. Proin viverra pellentesque odio et laoreet. Nulla dignissim nulla sit amet sem euismod congue. Suspendisse iaculis viverra diam, vitae luctus mauris tincidunt a. Fusce pulvinar, erat non fringilla pharetra, mi tortor suscipit nunc, id rutrum erat justo a massa.
De mulige værdier for style er:
- dashed
- stregen tegnes som en serie korte linjestykker
- dotted
- stregen tegnes som en serie punkter
- double
- stregen tegnes som to linjer á ens tykkelse med et mellemrum på samme tykkelse
- groove
- stregen tegnessom en graveret rille
- inset
- stregen tegnes
- outset
- stregen tegnes
- ridge
- stregen tegnessom en ophøjet kant
- solid
- stregen tegnes som en ubrudt flad steg
#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.
