An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
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;}
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.
Original Link: https://dev.to/muhammadwasif/5-short-css-snippets-that-will-make-big-difference-ean
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To