Being a Front-end developer demands a lot of creativity. There is a wide range of CSS properties that a Front-end developer can use to come up with a stunning website. But having the knowledge of some handy CSS tricks not only saves your time but also adds to your creativity. Here are some cool CSS tricks that can upscale your Front-end development skills:
Apply a Cool Custom Cursor
You won’t see a custom cursor too often. But this can prove to be a classy property to apply. With cursor property in CSS, you can use different images and emojis as cursors. Applying this cursor property inside a div can keep the cursor display within the div element.
Use Percentage to Apply Properties
This has to be one of the important CSS tricks to learn. The major issue with most Front-end developers is that they start learning CSS by using absolute numbers while applying CSS properties. The issue does not end here. They also use absolute numbers while creating professional websites. Not every screen is the same. Every screen has different aspect ratios and demands a different adjustment for CSS properties.
This is where using percentages instead of absolute numbers can prove to be a very handy CSS trick. Doing so will ensure that your HTML elements will adjust in accordance with the screen on which they are viewed.
For example, setting the width of a div in pixels will never adjust well on a PC screen or mobile screen. Applying percentage will eventually prove to be a good option as you get a definite screen size in percentage across all types of screens.
Use !important for Uniqueness
You might have gone through situations where some HTML elements need special changes while copying the properties of other HTML elements. This is where you can use !important to force special CSS properties.
Let’s take an example of having three div elements all with the same properties. Applying !important for the third div element can give it some special properties which are not present in the other two div elements.
This CSS trick is not used very commonly. But it can turn out to be very handy for Front-end developers if they are fully aware of the entire structure of the code. Rather than applying different classes on HTML elements, you can use !important to make small changes.
Use :is() to Style Elements
Using :is() is one of the best CSS tricks to simply CSS. Imagine a situation where you have to use a wide range of selectors to apply different CSS properties. Applying properties to each selector separately not only makes the code complex but also increases the margin of error. Any selector with a slight mistake won’t get the desired change.
This is where you can use :is() as a conditional logic selector. With :is(), you can group all the selectors with the same CSS properties. This makes the code less complex and also removes the error issues.
For example, if you want to apply red color to headers and paragraphs within a card, then you can use the code .card :is(h1, p) to apply red color. The code will work even if you make a mistake and write .card:is(h1, :p). In this case, only headers will get red color.
Use Sidebars with Hover Effects
Sidebars are very commonly used on websites. Long gone are those days when people loved simple sidebars. The introduction of new styling properties has brought new ways to design sidebars. Now you can create dynamic hover-effect sidebars with CSS.
By using transform and :hover properties, you can make your sidebar hidden on the side of your webpage. Once a user brings the cursor over the sidebar element, the entire sidebar will slide to give you a dynamic view. This can be a good addition to your CSS tricks.
You can master these tricks by learning more on W3Schools.
Use Link States
This is one of the most overlooked CSS tricks which Front-end developers don’t prefer to use. It looks very good to have a clear differentiation between those links that are already visited and those which are not visited. This can be made possible by using :link and :visited pseudo-class controls for creating a distinction among links.
If you are running a blogging website, then chances are that your website will have a lot of links in it. Use link states to give your users a better usability feature.
You can try out all these tricks on CodePen in a modular way.
Style Multiple Selectors Simultaneously
It is good to bring the best results with a lesser complex code. As a professional Front-end developer, you must learn CSS tricks for applying CSS properties in a more efficient way. If you have to apply border to an image and a sidebar, then you must apply CSS border property to both of these HTML elements simultaneously by using [img, .sidebar { border: 1px solid #000; }].
Apply Smooth Scrolling
You can use CSS tricks to adjust the scrolling of your webpage. Instead of using complex JavaScript smooth scrolling codes, try using CSS tricks to navigate to different sections of your webpage with smooth scrolling. Instead of scrolling through various sections of your webpage to reach your desired section, you can use smooth scrolling for direct navigation.
Use Letter Dropcap Effect
This CSS trick is helpful mostly for blogging websites or educational websites. You can use ::first-letter pseudo-class to apply drop-cap effect to the first letter of your text. Moreover, you can also use this CSS property to style those elements that are appearing on the page for the first time. You can use a first-of-type pseudo-class to make this happen.
You can also learn some cool CSS tips and tricks from CSS-tricks.
Add Icons with Buttons
A website with an easy-to-understand design improves user experience. You must develop the habit of adding icons with buttons to make them more understandable for the users. You can create a custom :before class for the buttons. You can easily adjust the size of your icon to fit the button width and height without the need to use JavaScript.
