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.
Top comments (1)
This is so cool thank you for sharing 🙏🌹