CSS tips and tricks you won’t see in most of tutorials.
If you're learning CSS, I'd suggest you to check this CSS Tutorial first.
What is CSS?
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a main technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
Let's start with the tips!
* Cursors
Did you know that you can use your own image, or even emoji as a cursor?
* Smooth scrolling
Smooth scrolling without JavaScript, with just one line of CSS.
* Truncate text
Did you know that you can truncate text with plain CSS?
* Truncate the text to the specific number of lines.
You can use “-webkit-line-clamp” property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped.
You can find more HTML/CSS/JS Tips here: github.com/MarkoDenic/awesome-html-css-js-tip
If you liked this article, be sure to ❤️ it.
This article is a repost from my blog. Find the original post here: CSS Tips.
A bonus: Read more about CSS line-height.
Didn't know about
webkit-line-clamp, but I don't really know a usecase where hiding content would be useful.