5 awesome CSS tricks for beginners
Tags: css, webdev, ux, html
Published: 2021-07-11 04:05:57

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:

```css
: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:

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

Variables can be used to create awesome effects such as the [**Dark Mode**](https://dev.to/ruppysuppy/dark-mode-using-css-variables-1m3) given below with great ease.

{% codepen https://codepen.io/ruppysuppy/pen/eYBEogP %}

# 2. Clip Path

`clip path` property makes creating some cool shapes in your websites a walk in the park. [A simple example](https://tapajyoti-bose.vercel.app) of `clip path` usage is given below.

![Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkgz2btjivsck7wjkwy2.PNG)

The syntax for `clip-path` in **CSS** is:

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

You can generate simple `clip paths` using [Clippy](https://bennettfeely.com/clippy/), or develop custom `clip paths` for advanced shapes like:

{% codepen https://codepen.io/ruppysuppy/pen/MWmjbNW %}

**NOTE:** This pen was developed by [Jon Kantner](https://codepen.io/jkantner)

# 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.

```css
/* 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

{% codepen https://codepen.io/ruppysuppy/pen/JjNREYN %}

# 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:

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

**NOTE:** Cursors are not visible in mobile devices.

{% codepen https://codepen.io/geoffgraham/pen/qZjwGe %}

**NOTE:** This pen was developed by [Geoff Graham](https://codepen.io/geoffgraham)

# 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.

```css
background-size: cover;
```

{% codepen https://codepen.io/ruppysuppy/pen/mdmrLaV %}

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

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Want to work together? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for weekly new tidbits on [Dev](https://dev.to/ruppysuppy)

Connect to me on:

-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose-429a601a0)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)

<!--# 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-->