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.
Have you ever used scroll driven animations?
That's what I present in my new blog article 🔽
https://buff.ly/40p3EZT
What’s inside:
- A beginner-friendly introduction to scroll-driven animation
- Practical use cases and examples
- Tips for browser compatibility
- Third value (2rem): The maximum size, preventing the text from getting too large
The best part? It is supported by 96.77% of browsers. So it’s pretty safe to use!
- clamp() defines a flexible range for the font size
- First value (1rem): The minimum size, ensuring it never gets too small
- Second value (0.5rem + 2vw): The preferred size, which adjusts based on the viewport width (vw)
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
Did you know your website could get hacked with CSS?
I didn’t know it either before reading this article: systemweakness.com/defending-ag...
People are so creative, it’s amazing!
Ok the gif didn't work. This is the gif I wanted to import:
One liner responsive layout
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.
Hey everyone !
I’m going to start posting regularly about frontend topics.
Stay tuned 🔥
