Here I would like to introduce a few CSS properties that perhaps not everyone knows, but should know and use. I myself have not known or used all of them. Of course you always have to pay attention to the browser compatibility.

POSITION: STICKY

To make an element sticky when scrolling down, I used to often use JavaScript that matches scrollTop and browser window top and at a certain point sets the class from position:relative; to position: absolute or fixed.
It’s much easier with position: sticky

Demo:

Click on the button to load the content from codepen.io.

Load content

More details | Browser support

background-clip

With background-clip you can apply a background image to different things. For example, you can apply a background image to a text. This can be used very well in hero elements.

Values: border-box (default) | padding-box | content-box | text

Demo:

Click on the button to load the content from codepen.io.

Load content

More details | Browser support

column-count

Divide text into columns without wrapping the text in individual divs and using flexbox or float.

Demo:

Click on the button to load the content from codepen.io.

Load content

More details | Browser support

writing-mode

If you want to display a text vertically, you can either put a transform:rotate(90deg) on it, or just use writing-mode: vertical-lr

Values: ithorizontal-tb (default) | vertical-rl | vertical-lr

Demo:

Click on the button to load the content from codepen.io.

Load content

More details | Browser support

line-clamp

The CSS property line-clamp can be used to shorten a text element like a paragraph or a headline in lines. This is especially useful if you have several text blocks and want them to be always the same length – no matter how long the actual text for it is.

You need 3 properties for this:

display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

Demo:

Click on the button to load the content from codepen.io.

Load content

More details | Browser support

Photo by Maik Jonietz on Unsplash

Write A Comment