Have you ever wanted to create an inverted hover effect?
I'll show you how with just 2 extra lines of CSS!

No hacks. No JavaScript. Just the magic of the :has() selector.
CSS is evolving fast, and :has() is proof of that.

Ever wanted to make text pop by filling it with an image?
It’s super simple with CSS!

The magic lies in background-clip: text.
This property controls how far the background extends.

This technique is perfect for eye-catching headers or unique branding.

Did you know CSS has a hidden gem called “display: contents"?

“display: contents" makes an element disappear from the layout visually, while keeping its children styled and functional as usual.

Checkout the example below, or go to the codepen https://buff.ly/3BP8hD4 I created to see it live.

Did you know you could have responsive text without using any media queries?

It can be done with one line of code:
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

Not easily readable at first, but once you know the logic it's pretty simple (thread) ⬇️

Need to limit text to 3 lines with a neat ellipsis? Here's a quick CSS trick:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Perfect for cards and previews!

#CSS #learnCSS

Ok the gif didn't work. This is the gif I wanted to import:

Tired of media queries for responsive layouts? Try this one-liner CSS trick:

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

- auto-fit adjusts columns based on space.
- minmax() sets column size range.
- min(100%, 300px) ensures columns fit the container.