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:
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:
column-count
Text in Spalten unterteilen, ohne den Text in einzelne divs zu wrappen und flexbox oder floaten zu gebrauchen.
Demo:
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:
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:
Photo by Maik Jonietz on Unsplash
