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 virker det pt. (september 2015) kun i Internet Explorer fra version 10. Firefox, Chrome og Safari kan bringes med ved at anvende et hack.
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 {
column-count: 3;
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 {
column-count: 3;
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 {
column-count: 3;
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 {
column-count: 3;
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 {
column-count: 3;
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 {
column-count: 3;
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.
