Developers now have more options than ever before for customizing websites’ appearance. But in the rush of daily tasks and amidst the clatter of countless lines of code, many of us fall back on what we already know.
We often forget that different CSS properties can take our designs from good to visually appealing. Today, let’s explore 10 of these underutilized CSS properties that can give your designs a new appearance.
1. clip-path — Visual Shapeshifter
The clip-path property shapes web elements like cookies. You can shape an element to match an SVG or to seem unique. It’s that simple and creative!
.circle {
clip-path: circle(50% at 50% 50%);
}
With the power of the clip-path property, you have the ability to create cool animations and transitions, all without using heavy images or overly complex scripts.
2. object-fit — Perfect Fit Every Time
Think of object-fit as the tailor of the web. It defines how <img> or <video> elements resize themselves within their containers.
img {
object-fit: cover;
}
When resizing media, it maintains the original aspect ratio. No more odd cropping or stretching.
3. backdrop-filter — Background Magician
With the backdrop-filter, you can add effects like blurs or color changes to the backgrounds of your elements, making them dynamic and vibrant.
.backdrop {
backdrop-filter: blur(5px);
}
Use effects like glossy glass to make your website look better. It’s a great way to make things like pop-ups or sidebars stand out.
4. calc() — Calculator for Style
You can do math in your stylesheets with the calc() function. This means you can adjust sizes or positions when needed.
.container {
width: calc(100% - 20px);
}
At its best, flexibility. Adjust sizes, positions, and margins. This is very beneficial for designs that require responsiveness.
5. contain — Element Isolator
Some parts of a website can stand on their own thanks to the contain feature.
.independent {
contain: content;
}
Performance is key. By highlighting non-impacting elements, you improve browsing speed and experience.
6. mix-blend-mode — Digital Painter’s Delight
Think of your content as paint on a canvas. With mix-blend-mode, you can decide how this “paint” works with layers below it.
.blend {
mix-blend-mode: multiply;
}
Get creative by stacking web elements in new ways. This can give your designs a richer, more interactive look.
7. writing mode — Typography’s Flexible Friend
Flipping the script, literally. Writing mode changes your text’s direction, making it horizontal or vertical.
.vertical-text {
writing-mode: vertical-rl;
}
It’s not simply for languages that write vertically. This property gives titles, pull quotes, and sidebar notes a new, eye-catching design look.
8. grid-template-areas — Making Layouts Intuitive
With the help of this feature, you can give each grid space a name, giving you a bird’s-eye view of your layout.
.grid {
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
Design becomes more intuitive. It simplifies managing responsive designs and makes your grid structures easy to grasp at a glance.
9. will-change — Future Predictor
Give browsers a heads-up about changes you’ll make to an element. It’s like telling a friend to expect a surprise so they’re better prepared.
.animation-target {
will-change: transform, opacity;
}
By hinting at what will change, browsers can prep themselves, ensuring smooth animations and transitions with fewer jerks or delays.
10. :is() — Simplifying Selectors
The :is() will-change helps tidy up your styles. It groups similar things together, so you don’t have to repeat yourself.
:is(h1, h2, h3) {
margin-top: 0;
}
Efficiency and cleanliness are the future of coding. When you streamline your stylesheets, you make your code tidier and ensure you follow the DRY principle.
Conclusion
Web designers are like artists, but our canvas is digital. Trying new tools can lead to amazing discoveries. So, dive into these CSS properties; they might inspire your next design.
Are you an early adopter who has used some of these properties? Or Perhaps you’ve discovered other CSS gems on your design journey?
We’d love to hear from you! Share your insights, experiences, and tips in the comments below.
If you found this article useful or have more insights on the topic, feel free to connect with me on Twitter and LinkedIn. Let’s continue the conversation there!
Before you dive back into code, please take a moment to give this article a ❤️ or 🦄, drop a comment below, or share it with your fellow devs. Your feedback helps me craft more insightful tech content!
Top comments (10)
Ooh, thanks for reminding me of will-change! Of the list above I use clip-path, mix-blend-modes, filters, :is and calcs all the time. Speaking of which, calcs are a thing to keep an eye on - with trigonometric functions finally having received general support across browsers earlier this year, and pow(), sqrt() and hypot() on the horizon (currently only supported by Safari and Firefox, which were also the first adopters of trigs)
Absolutely! I’m thrilled to hear that you’re making good use of so many CSS properties. Thanks for pointing out the newer additions and their browser support. Keep experimenting and pushing the boundaries of CSS! ✨🚀
Then you'll be horrified that I mostly use those for inconsequential experimental demos on Codepen ;)
Still, I absolutely LOVE coding those
Haha, every great masterpiece starts with a doodle! 😄 Codepen is a fantastic playground for trying out and showcasing those little experiments. Who knows? One of those 'inconsequential' demos might spark an idea for something bigger. Keep experimenting and having fun with CSS! 🎨🖌️
thanks for this! i discovered a few new tools to play with!
You're welcome! I'm glad you found some new tools to explore. Feel free to ask if you have any questions or need further tips as you play around with them. Happy coding! 😊🛠️
Nice selection, thank you!
Thank you! I'm glad you found it helpful. Let me know if there's anything else you'd like to know or explore. Happy coding! 😊
Great list I use a few of these but also learned some new ones. You repeated the same sentence in #5 just so you know. Over all good work
I'm glad that you find the article helpful. I removed the duplicated sentence. Thanks for reading and pointing out the errors.