Useful CSS properties you may not know yet

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:

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

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:

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

More details | Browser support

column-count

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

Demo:

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

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:

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

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:

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

More details | Browser support

Photo by Maik Jonietz on Unsplash

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Artikel

So steigerst du nachhaltig die Sichtbarkeit deiner Webseite mit regelmäßigem Blog-Content

Kennst Du das? Du hast eine tolle Webseite für Dein Unternehmen – vielleicht sogar professionell gestaltet und technisch perfekt optimiert – und seit dem Online-Start …

Webflow vs. WordPress: Der ewige Machtkampf unter Webdesignern – und was wirklich zählt

Kaum ein Thema spaltet die Webdesign-Community so sehr wie die Frage: Webflow oder WordPress?Fast jedes Mal, wenn ich durch LinkedIn oder Instagram scrolle, stolpere ich …