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 selec…


This content originally appeared on DEV Community and was authored by Muhammad Wasif

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

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


This content originally appeared on DEV Community and was authored by Muhammad Wasif


Print Share Comment Cite Upload Translate Updates
APA

Muhammad Wasif | Sciencx (2021-04-24T12:13:42+00:00) 5 Short CSS Snippets that will Make Big Difference. Retrieved from https://www.scien.cx/2021/04/24/5-short-css-snippets-that-will-make-big-difference/

MLA
" » 5 Short CSS Snippets that will Make Big Difference." Muhammad Wasif | Sciencx - Saturday April 24, 2021, https://www.scien.cx/2021/04/24/5-short-css-snippets-that-will-make-big-difference/
HARVARD
Muhammad Wasif | Sciencx Saturday April 24, 2021 » 5 Short CSS Snippets that will Make Big Difference., viewed ,<https://www.scien.cx/2021/04/24/5-short-css-snippets-that-will-make-big-difference/>
VANCOUVER
Muhammad Wasif | Sciencx - » 5 Short CSS Snippets that will Make Big Difference. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/24/5-short-css-snippets-that-will-make-big-difference/
CHICAGO
" » 5 Short CSS Snippets that will Make Big Difference." Muhammad Wasif | Sciencx - Accessed . https://www.scien.cx/2021/04/24/5-short-css-snippets-that-will-make-big-difference/
IEEE
" » 5 Short CSS Snippets that will Make Big Difference." Muhammad Wasif | Sciencx [Online]. Available: https://www.scien.cx/2021/04/24/5-short-css-snippets-that-will-make-big-difference/. [Accessed: ]
rf:citation
» 5 Short CSS Snippets that will Make Big Difference | Muhammad Wasif | Sciencx | https://www.scien.cx/2021/04/24/5-short-css-snippets-that-will-make-big-difference/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts