TheoSoti
@theoleff.bsky.social
Freelance front-end developer — I share CSS and JS tips & tricks.
Checkout my blog https://theosoti.com
Checkout my blog https://theosoti.com
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.
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.
January 13, 2025 at 4:10 PM
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.
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.
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.
“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.
January 8, 2025 at 9:50 AM
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.
“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) ⬇️
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) ⬇️
December 11, 2024 at 10:09 AM
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) ⬇️
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) ⬇️
Ok the gif didn't work. This is the gif I wanted to import:
December 2, 2024 at 7:42 AM
Ok the gif didn't work. This is the gif I wanted to import: