M Mainul HasanDevelopers 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!
