CSS Tips you won't see in most tutorials

CSS tips and tricks you won’t see in most 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!

Dynamic Tooltips

Create dynamic CSS-only tooltips, using the attr() CSS function.

* caret-color

You can change the color of the text input cursor.

caret-color2.png

* 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 the text with plain CSS?

* Truncate the text to a specific number of lines.

You can use -webkit-line-clamp property to truncate the text to a specific number of lines. An ellipsis will be shown at the point where the text is clamped.

* Center

Easily center anything, horizontally and vertically, with 3 lines of CSS:

.center {
  display: flex;
  align-items: center;
  justify-content: center;       
}

* Drop shadow

When you work with transparent images you can use drop-shadow() filter function to create a shadow on the image's content, instead of box-shadow property which creates a rectangular shadow behind an element's entire box: filter:

drop-shadow(2px 4px 8px #585858);

* Typing Effect

Did you know that you can create a typing effect with zero JavaScript?

* ::selection CSS pseudo-element

  • ::selection CSS pseudo-element

* Anything resizable

Did you know that you can make any element resizable, just like <textarea>?

.resize {
  resize: both;
}

* CSS modals

You can use the :target pseudo-class to create modals with zero JavaScript.

* calc()

The calc() CSS function lets you perform calculations when specifying CSS property values:

.calculated-width {
  width: calc(100% - 30px);
}

* Style empty elements

You can use the :empty selector to style an element that has no children or text at all:

* position: sticky;

You can create sticky section headers with 2 lines of CSS.

Did you know that you can create a custom scrollbar:

* CSS Scroll Snap

You can use the CSS Scroll Snap feature to create well-controlled scroll experiences:

You can find more HTML/CSS/JS Tips here: github.com/MarkoDenic/awesome-html-css-js-tip

Happy coding! ❤️

If you liked this article, be sure to ❤️ it.

Let's keep in touch:
Website: markodenic.com
Twitter: @denicmarko

Anachebe Dreamchild Ikechukwu's photo

Thanks for these tips

Marko Denic's photo

My pleasure!

Iyiola oluwaseun's photo

This was really helpful, Thanks for sharing

Marko Denic's photo

Glad you liked it.

Aj Pharrel's photo

Thanks for these really good snippets !

Marko Denic's photo

My pleasure. :)

Diox76 diox76's photo

Awesome tips! Thanks for your motivational posts! Best regards.

Marko Denic's photo

Thanks a lot! :)

Okonkwo johnpaul chisom's photo

Am getting motivated as a beginner to continue with my web development program thanks to your tips

Marko Denic's photo

I'm very happy to hear that! Fell free to contact me on Twitter if you need any help, my DMs are open.

Andrew's photo

Sir, you are a legend! Thank you for the rare tips

Marko Denic's photo

Thanks a lot Andrew for your kind words. Enjoy the tips!

Chris Neale's photo

Check out CSS Grid's 'place-items' for an even easier way to center things. :)

Kouriba Ali's photo

Just Wow, Very very Nice tips Marko, Thank you for sharing them.

Marko Denic's photo

Thanks a lot, Kouriba! :)

Aleksandr Kushchik's photo

Nice article, Marko! I've just added to my bookmarks and will use it soon!👍

Marko Denic's photo

That's great to hear. Awesome!

Sabarish Rajamohan's photo

Nice tips man! Thanks for sharing them :)

Marko Denic's photo

Thank you Sabarish Rajamohan! I'm glad you like them.

Saurabh Bharti's photo

Wow I am going to implement all of them in my current project. Thank you

Marko Denic's photo

Hey Saurabh Bharti! 👋

I'm glad you liked the tips.

موسی هوډمن's photo

Helpful tips thanks for sharing.

man ito's photo

good and helpful

Shahar-kehat Bar's photo

Awesome!! Thanks a lot 🙏🏻

Gerardo Cardenas's photo

I don´t understand CSS modals. The example is not intuitive and I don´t see the code to make it. Info is missing. Another point: It will be useful to start writing a list of each subtopic (the ones with *) - best regards.

Show +3 replies
Marko Denic's photo

Thanks a lot! ❤

Gerardo Cardenas's photo

Thanks for your explanations. Now I understand it. Marko Denic