5 Short CSS Snippets that will Make Big Difference

#css #codepen #webdev #html

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;
}

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;
}

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;
}

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;
}

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

var el = document.getElementById('element'); el.requestFullscreen();

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;
}