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:
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:
column-count
Divide text into columns without wrapping the text in individual divs and using flexbox or float.
Demo:
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:
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:
Photo by Maik Jonietz on Unsplash
