Skip to main content

Posts

Showing posts from February, 2022

Custom Property with CSS Variables

CSS variables have access to the DOM, simply create variables with local or global scope. DEMO Color via CSS Variable CSS :root { -- heading - color : limegreen ; } h2 { color : var( -- heading - color ); }

Split Content into Columns - CSS

  Long text in single paragraph can be nightmare for designer, this can be resolve with column element in CSS. See the demo below in action. DEMO Integer vulputate eros ipsum. Ut sed finibus magna. Nam mattis ex non turpis aliquam, eget pellentesque nisi convallis. Mauris commodo vitae est et gravida. Nulla facilisi. Nulla molestie, metus ut ultrices semper, leo nisi ullamcorper nisl, in eleifend augue lorem eu nisi. Aenean et lacus sit amet nisl placerat accumsan. Aenean pharetra erat id ultricies malesuada. HTML <p> Integer vulputate eros ipsum. Ut sed finibus magna. Nam mattis ex non turpis aliquam, eget pellentesque nisi convallis. Mauris commodo vitae est et gravida. Nulla facilisi. Nulla molestie, metus ut ultrices semper, leo nisi ullamcorper nisl, in eleifend augue lorem eu nisi. Aenean et lacus sit amet nisl placerat accumsan. Aenean pharetra erat id ultricies malesuada. </p> CSS p { column - count : 2 ; column - gap : 40px ; column - rule :