loading...
Cover image for CSS Tips you won't see in most tutorials

CSS Tips you won't see in most tutorials

denicmarko profile image Marko Denic Originally published at markodenic.com ・2 min read

Tips (3 Part Series)

1) HTML Tips 2) CSS Tips you won't see in most tutorials 3) JavaScript Secrets

CSS tips and tricks you won’t see in most of tutorials.

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.

Let's keep in touch:
Blog
Twitter
Github
Codepen

Tips (3 Part Series)

1) HTML Tips 2) CSS Tips you won't see in most tutorials 3) JavaScript Secrets

Posted on Apr 21 by:

denicmarko profile

Marko Denic

@denicmarko

Full stack dev. Working on e-learning, recruiting, project management and all sorts of platforms.

Discussion

markdown guide
 

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-clamp awesome!

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!

 
 

Hey Michael! Thanks for reading! I really like your Github Projects. Awesome!

 
 
 

Hey Francesco, glad you liked it.

 

I knew all of them except Smooth scrolling it's nice when things can be done just via CSS.