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 ;)
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
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:
Top comments (26)
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 ..
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 :)
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-pathpart, 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 useclip-pathI appreciate that you invested so much time in helping me improve the blog. Thankyou! :)
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.
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)
I see, I get your point now. Thank you for clarifications.
These properties aren't used often, hence the name. I mentioned at the beginning as well
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.
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?
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.
Thanks for the clarification :)
Thank you for your understanding and your changes, I appreciate that 💪🏼🍨
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.
They are actually called "css variables" as far as I know 😅
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".
Thanks for sharing this :)
Thanks a lot for sharing this :)
Thanks for this ! great work
:)
As a person who is just starting out as a developer, I found so many things new here. Thanks and keep it up🙌👍👍👍
Glad you found it useful :)
These are common knowledge?
Apparently it does seem quite a few people are aware of these 😅
I'm a beginner in coding, so this article is very helpful. Thank you very much Tapajyoti.
Glad you found it helpful :)