5 awesome CSS tricks for beginners

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 ;)