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.
Top comments (8)
Good tips, maybe it's good to add that Smooth scrolling is not supported by Safari and IE (caniuse.com/#feat=css-scroll-behavior).
There is a good polyfill for this though: github.com/iamdustan/smoothscroll
Didn't know about
webkit-line-clamp, but I don't really know a usecase where hiding content would be useful.Hey Corentin! Thanks for reading and taking time to comment.
I find
-webkit-line-clampawesome!You can find the example from medium.com in attachments.
Example: dev-to-uploads.s3.amazonaws.com/i/...
Example code: dev-to-uploads.s3.amazonaws.com/i/...
Oooooow no more trimming in php or Python for short content!
Really cool!
Nice article Marko! Thanks!
Hey Francesco, glad you liked it.
Hey Michael! Thanks for reading! I really like your Github Projects. Awesome!
I knew all of them except Smooth scrolling it's nice when things can be done just via CSS.