3 important tricks of CSS
Can you imagine a website without CSS? No way! It looks as ugly as me! I wish God could use more CSS styling to make myself look beautiful. By the way, we are not God, We are just web designers who may use the power of CSS to make their websites visually amusing. If HTML is the backbone, CSS is the flesh and feather. There are thousands of properties of CSS, thousands of cool stuff that you might not be aware of. Let’s discuss three useful tricks of CSS which are easy to remember and pretty much helpful.
To Top with a smooth transition:
Suppose you have got a page of more than 3 viewport height. The user goes to the last section and wants to go back to the top. How can he do that? Obviously by scrolling. But isn’t it irritating to the user? He has to scroll a long way to the top. This makes a bad impression. So what can we do then? How about a clickable button, pressing that takes you to the top of the site or any section you like. And definitely with a soothing transition. You can achieve this just with one line of HTML and one line of CSS. After the ending section of the HTML page, you can create a link and nest it with a button. <a href= #section1> </a>. And place the id of your desired section (the section where you want the user to revert back) in the href attribute. That’s enough with HTML. Go to your styling page, and define scroll-behavior smooth for the whole page using the Asterisk, I mean (*) the all selectors of CSS.
Get rid from horizontal scroll bar:
Sometimes you get a horizontal scrollbar on your site. You didn’t create that functionality. You don’t want that but however, it appears from nowhere like out of the blue. Maybe there could be some bugs in your stylesheet or in the HTML page and for that reason, it is scrolling horizontally and abnormally. It is such an annoying thing. You have got huge chunks of codes and you don’t have the time to find out the bug. Ok, don’t worry. You Just have to implement a one-liner punch of CSS. Just give “overflow-x: hidden” for the whole page using the all selectors.
What about a drop cap like this medium article? Let me clear those guys who don’t know what drop cap is. It is actually dropped capital, an enlarged capital letter at the beginning of an article or a paragraph. We use it as a decorative way to enhance the visual. You can notice in this article all my subheading starts with a huge first letter. That is the drop cap. By the way, how can we do it using CSS? Close your eyes, and pay a thank to the mighty css3. Using its power you can do this in a moment.
You just have to use a pseudo-class first-child:first-letter to target the first letter of the paragraph.
Actually CSS is full of surprises. Day by day it getting updated and gaining more functionality. These above 3 tricks are just a drop of water in the vast ocean of CSS. Hope you guys liked that. Bye, Have a great time with CSS.