DEV Community

loading...
Cover image for 5 awesome CSS tricks for beginners

5 awesome CSS tricks for beginners

Tapajyoti Bose
Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor
・3 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Portfolio

The syntax for clip-path in CSS is:

.selector {
    clip-path: <path>;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (27)

Collapse
afif profile image
Temani Afif

I was expecting some new properties but I see properties that have at least 5 years old so please avoid the "awesome" and "you didn't know". It's only clickbait ..

Collapse
pierrewahlberg profile image
Pierre Vahlberg

A bit pessimistic, but your point is sort of valid. Even though these features are not brand new, a few searches on caniuse lets you know that a lot of cool css features are not very well supported. If something gains traction after 4 years however, i would approve it as "something new" since its recently been made usable.

Clip-path here is one such, not 100% supported but well adopted nowadays.

Also, an addition to the article. Css variables can be adjusted with javascript, which allows you yo create really cool color pickers that can generate conplementary colors or re-theme a UI based on a multi color selection that is applied from js :)

Collapse
afif profile image
Temani Afif

not pessimistic but I hate clickbait title. We can simply say "5 CSS properties for beginner" or "5 CSS properties to start you CSS journey", etc ... the "Awesome" "that you don't know" lead us to think that we will discover something innovative while it's not.
Clip-path exist since 2013 and is widely supported in major browsers since a lot of years.


Let's suppose all those properties are new and innovative, I don't see any detailed explanation on how to use them. I simply see the basic definition and 50% of the article is self-promotion and affiliate links.

Check the clip-path part, the "simple example" is leading to his personal website (a way to track more visitor) and he ended with a complex example taken from the Net. I doubt it's useful for beginner to get such example to better understand how to use clip-path

Thread Thread
ruppysuppy profile image
Tapajyoti Bose Author • Edited

I appreciate that you invested so much time in helping me improve the blog. Thankyou! :)

Collapse
juz14girl profile image
juz14girl

It's not clickbait for me as he puts the words "for beginners" and that alone is enough to understand that it is not for experienced one but rather for a people like me who's really new in this. Those that he mentioned above are really cool/awesome because it is for BEGINNERS and it isn't for people who's been in the industry for five years as you have stated.

Collapse
afif profile image
Temani Afif

the title and the article was edited after my comments so your comment is irrelevant now since you don't know the original title and content I commented for (the word beginners didn't exist)

Thread Thread
juz14girl profile image
juz14girl

I see, I get your point now. Thank you for clarifications.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

These properties aren't used often, hence the name. I mentioned at the beginning as well

Collapse
thomasbnt profile image
Thomas Bnt

Hello ! Mod here!

Your post seems not appropriate like affiliates links at the end. This is not the subject of this post, please remove it πŸ˜„

Your post "5 awesome CSS tricks you did not know" seems a bad clickbait since variables names on CSS is not a secret and also others points.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

I have changed the name & commented out the affiliate links. I didn't know that affiliated links were not allowed, could you link up the article where I can find these rules?

Collapse
thomasbnt profile image
Thomas Bnt

Nice change on your part regarding the title ! Better appropriate πŸ’ͺ🏼

It's not marked on the Code of Conduct or anywhere, we believe that a topic published on DEV should contain affiliate links when necessary and related to the topic of the article, while marking "This post includes affiliate links; I may receive compensation if you purchase products or services from the links provided in this article." for a clear disclaimer so readers are aware of it.

Thread Thread
ruppysuppy profile image
Tapajyoti Bose Author

Thanks for the clarification :)

Thread Thread
thomasbnt profile image
Thomas Bnt

Thank you for your understanding and your changes, I appreciate that πŸ’ͺ🏼🍨

Collapse
lukeshiru profile image
LUKESHIRU • Edited

Nice! 1 thing worth mentioning about CSS custom properties is that you can have default values for them. Here's an example:

.selector {
    width: var(--width, 100%);
}
Enter fullscreen mode Exit fullscreen mode

If the element matching .selector doesn't have a --width set, it defaults to 100%:

<div class="selector">This one is 100% width</div>
<div class="selector" style="--width: 50vw;">This one has 50vw width</div>
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Thanks a lot for sharing this :)

Collapse
darkwiiplayer profile image
DarkWiiPlayer

I don't quite like the name "CSS Variables", because that makes people think of variables in programming languages. Calling them "Custom Properties" paints a much better picture of what they are and how they behave.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

They are actually called "css variables" as far as I know πŸ˜…

Collapse
darkwiiplayer profile image
DarkWiiPlayer

They are called custom properties, but even the spec uses the word "variable" to describe their behaviour. Still, custom property is a bit more accurate in describing their behaviour, specially after preprocessors have shaped what people consider a "css variable".

Thread Thread
ruppysuppy profile image
Tapajyoti Bose Author

Thanks for sharing this :)

Collapse
jaymindo profile image
jaymindo

Thanks for this ! great work

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

:)

Collapse
faruq_jada profile image
Faruq Ahmed

As a person who is just starting out as a developer, I found so many things new here. Thanks and keep it upπŸ™ŒπŸ‘πŸ‘πŸ‘

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Glad you found it useful :)

Collapse
adam_cyclones profile image
Adam Crockett

These are common knowledge?

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Apparently it does seem quite a few people are aware of these πŸ˜…

Collapse
martinromario55 profile image
Martin Romario Ntuwa

I'm a beginner in coding, so this article is very helpful. Thank you very much Tapajyoti.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Glad you found it helpful :)