Awesome CSS tricks every developer should know

Smooth scrolling

This technique is super important when you have a button that displays a different part of your web page. Doing it with a simple href="#goToContact" will definitely move quickly but not funny. Having a smooth scroll is funny and professional. Your web visitor deserves the best user experience.

html {
  scroll-behavior: smooth;
}

Resize images to fit

Who didn’t have a headache making an image fit to a place on your web page?

Here is an example:

img {
    max-width:100%;
    height:auto;
}

Setting an image as cursor

Want to make your cursor special like your web app or website? This can give a unique souvenir to your web visitor, so why not:

body {
  cursor: url("images/cursor.png"), auto;
}

Center anything in 3 lines of code

.center {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Set a limited content in a paragraph

Do you need to display only a few phrases in your paragraph? Again, CSS can do this in one line of code. The -webkit-line-clamp CSS property allows limiting of contents of a block container to a specified number of lines.

p {
  -webkit-line-clamp: 5;
}

css

References:

• 5 Awesome CSS tricks every developer should know