9 Useful CSS Tricks that You Should Know
Discover new things about CSS, you’ll be fascinated by it, and everything will be more interesting.
The CSS universe is full of tricks that we don’t know, so can’t say that I listed all the tricks of CSS in this part of the story, the more you know about it, the more you discover, and everything will be more interesting.
1) Text Selection Color
When you visit a website or read a blog, you often select the text with the mouse, it’s just the blue color selection with white text. you can make your website stand out with a customized text selection.
Use the selection pseudo-element to give the text selection on your websites a personal touch.
2) Drop Caps
To get a professional article/newspaper look, it’s good to use a drop cap for the first letter of your text. The drop cap is that large capital letter and the text is wrapped around it.
Use the first-letter pseudo-element to decorate your first letter, no need to use span with .dropcap class name.
3) Smooth Scrolling
you visit some websites and try to go to different sections, it scrolls smoothly to that section. It’s not high-level coding, but with just one line in your CSS, you can achieve this.
You can use the CSS scroll-behavior property with html as a selector to enable smooth scrolling throughout the HTML page.
4) Input Caret Color
you can change the color of the input field-caret to make it more customized.
You only need to use the caret-color property for this item!
5) Drop Shadow
give a much better shadow effect to the transparent images with Drop shadow, This is how your work will look great.
This is how you should do it.
6) Place-Items
Centering your div element can be daunting sometimes, You can center any div with just a couple of lines of CSS.
Don’t Forget To set display:grid;for the parent element, then use place-items property.
7) Custom Scrollbar
The default scrollbar is not attractive to the user, what you can do is customize this scrollbar.
We only do this with CSS, if you want to get full support on the cross browsers, it is better to use JavaScript libraries for scrollbars.
8) Disable User Selection
Sometimes the user shouldn’t be able to select something on the web page, if used correctly it can give meaning to that element.
It’s that easy!
9) Vertical Text
You may visit some websites and see vertical text from the bottom to the top.
With these two CSS properties, you get what you want!
Conclusion
This is just a small part of CSS tips that may have made you curious and encourage you to learn more and get involved with CSS syntax. we use various libraries in many of our daily tasks. I’m not saying that’s bad, but if you are more familiar with CSS tips, sometimes you can change your ways and take the better one.
