Learning CSS is a life long journey. Everyday some new feature is coming up. With that said, there are quite a few features that I find to be used rarely, even though they are immensely helpful. This article is a short compilation of 5 such awesome CSS tricks that can take your skills to next level or simplify your workflow.

1. CSS variables

Variables can immensely help you keep your code DRY (Don't Repeat Yourself). You don't need SCSS to leverage the power of variables in your stylesheets, vanilla CSS supports it as well. The syntax for creating a variable in CSS is:

:root {
    --variable-name: value;
}

The value can store anything such as: 10px, 20rem, #ffffff, box-shadow: 0px 0px 0px 0px rgb(0,0,0), etc. and can be used with any CSS selector, but it is the convention to declare the variables in the :root.

You can use variable with any parameter such as padding, color, background, etc:

.selector {
    <param>: var(--variable-name);
}

Variables can be used to create awesome effects such as the Dark Mode given below with great ease.

2. Clip Path

clip path property makes creating some cool shapes in your websites a walk in the park. A simple example of clip path usage is given below.

The syntax for clip-path in CSS is:

.selector {
    clip-path: <path>;
}

You can generate simple clip paths using Clippy, or develop custom clip paths for advanced shapes like:

NOTE: This pen was developed by Jon Kantner

3. Text Ellipsis

There are often situations where you would like to handle how the overflow text appears in your website, text-overflow property is the way to go in such situations. It has a pre-requisite to forcefully make the text overflow as text-overflow only handles how the overflown text appears.

/* Pre-requisite */
overflow: hidden;
white-space: nowrap;

On adding text-overflow: ellipsis; the overflown text gets clipped and '...' appears at the end of the text

4. Custom Cursor

CSS already comes with a plethora of cursors which you can use with cursor: <cursor name>. Something most people don't know is that you can make your own cursors from images using:

cursor: url("<link to image>"), auto;

NOTE: Cursors are not visible in mobile devices.

NOTE: This pen was developed by Geoff Graham

5. Auto-resize Background Image

As a beginner, I used to struggle a lot with handling background images. There is a simple method to let CSS handle the background image resizing.

background-size: cover;

Conclusion

In this article you learnt a few advanced tricks to show-off in front of your friends and take your skills to the next level. Keep learning and practicing and you surely will become an outstanding developer ;)

Thanks for reading

Want to work together? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for weekly new tidbits on Dev

Connect to me on:

Workspace Setup

NOTE: The links given below are affiliate links. If you buy the items from these links, I will receive a small commission at NO additional cost to you.

US Links

i5 10th Gen Processor: https://amzn.to/3i7Yudt
GTX 1060 6 GB: https://amzn.to/3AKxXLK
Corsair Vengeance LPX 8 GB RAM: https://amzn.to/3yGa8ms
Redragon Gaming Keyboard and Mouse: https://amzn.to/3ywvbrs

India Links

i5 10th Gen Processor: https://amzn.to/3qXSEiE
GTX 1660 6 GB: https://amzn.to/2UxdOYM
Corsair Vengeance LPX 2x8 GB RAM: https://amzn.to/3e0jDVH
Zebronics Gaming Keyboard and Mouse: https://amzn.to/3AHQnfX