DEV Community

Cover image for 5 Short CSS Snippets that will Make Big Difference
Muhammad Wasif
Muhammad Wasif

Posted on

5 Short CSS Snippets that will Make Big Difference

Styles and themes of a website or an app make a huge difference for the use experience. Here are some short code snippets that will make your app or web page look 10x attractive and beautiful.

Custom Text Selection

You can change the selection style for your HTML pages using ::selection pseudo class.

::selection{
  background-color: deeppink;
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

Gradient Text

Gradient background for text can make your interface 10x more beautiful and attractive. Feel free to use this styling for big headings of your web pages.

.gradient-text {
  background:  linear-gradient(to top, #30cfd0 0%, #330867 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}
Enter fullscreen mode Exit fullscreen mode

Disable Select

Set user-select CSS property to none. This will disable text selection in your web pages. This pretty useful when you're making PWAs. This can help you provide native app like experience.

p {
  user-select: none;
}
Enter fullscreen mode Exit fullscreen mode

Full Screen Mode

Full screen mode for showing images is pretty useful and makes a big difference. You can also use this in your blogs where user can read in full screens. Pretty useful. Right?

#element:fullscreen {
  width: 100vw;
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

And enter this full screen mode by executing following JavaScript function.

var el = document.getElementById('element'); el.requestFullscreen();
Enter fullscreen mode Exit fullscreen mode

Custom Scroll Bar

Scroll bars that match with theme of your website or app make huge difference. Always change scroll bars styling and make it look good according to you app's theme.

You can style each element of scroll bar by targeting ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: pink;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: deeppink;
  border-radius: 12px;
}
Enter fullscreen mode Exit fullscreen mode

That's it! Leave some short snippets in comments if you know some.

Top comments (1)

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

This is so cool thank you for sharing 🙏🌹