DEV Community

loading...

Awesome CSS tricks every developer should know

rafaelvieirab profile image rafaelvieirab ・1 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Center anything in 3 lines of code

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

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;
}
Enter fullscreen mode Exit fullscreen mode


css

References:

Discussion (0)

Forem Open with the Forem app