Hier möchte ich ein paar CSS Properties vorstellen, die vielleicht nicht jeder kennt, aber kennen und einsetzen sollte. Ich selbst habe nicht alle gekannt bzw. eingesetzt. Man muss natürlich immer auf die Browser-Kompatibilität achten.

POSITION: STICKY

Um ein Element beim nachunten scrollen sticky zu machen, habe ich früher oft JavaScript verwendet, welches scrollTop und browser window top abgleicht und ab einem bestimmten Punkt die Klasse von position:relative; auf position: absolute oder fixed setzt.
Mit position: sticky ist das viel einfacher.

Demo:

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

Mehr Infos | Browserunterstützung

background-clip

Mit background-clip lässt sich ein Hintergrundbild auf unterschiedlich anwenden. Beispielsweise kann man so eine Text mit einem Hintergrundbild belegen. Das lässt sich zB. gut in Hero-Elementen einsetzen.

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

Demo:

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

Mehr Infos | Browserunterstützung

column-count

Text in Spalten unterteilen, ohne den Text in einzelne divs zu wrappen und flexbox oder floaten zu gebrauchen.

Demo:

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

Mehr Infos | Browserunterstützung

writing-mode

Wenn du einen Text vertikal anzeigen möchtest, kannst du entweder ein transform:rotate(90deg) darauf setzen, oder einfach writing-mode: vertical-lr verwenden

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

Demo:

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

Mehr Infos | Browserunterstützung

line-clamp

Mit der CSS Property line-clamp lässt sich ein Textelement wie ein Paragraph oder eine Headline in Zeilen kürzen. Das eignet sich besonders dafür, wenn man mehrere Textblöcke hat und diese immer gleich lang sein sollen – egal wie lang der eigentliche Text dafür ist.

Man benötigt dafür 3 Properties:

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

Demo:

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

Mehr Infos | Browserunterstützung

Photo by Maik Jonietz on Unsplash

Kommentar schreiben