CSS Tip! π
You can select the previous siblings of an element with :has() to create cool hover effects like this OS dockπ₯ No JS π
:root{--lerp-1:0.525;}
a:has(+a:hover){
--lerp:var(--lerp-1);
translate: 0 calc(var(--lerp) * -75%);
}
Demo link and explanation below! π
You can select the previous siblings of an element with :has() to create cool hover effects like this OS dockπ₯ No JS π
:root{--lerp-1:0.525;}
a:has(+a:hover){
--lerp:var(--lerp-1);
translate: 0 calc(var(--lerp) * -75%);
}
Demo link and explanation below! π
First, here's that @CodePen link! π
You'll need to be in Safari, Chrome BETA, or you can use Chrome/Firefox with flags enabled β³οΈ
Try not only :hovering the items, but also tabbing through them too β¨
codepen.io/jh3y/pen/mdxggβ¦
You'll need to be in Safari, Chrome BETA, or you can use Chrome/Firefox with flags enabled β³οΈ
Try not only :hovering the items, but also tabbing through them too β¨
codepen.io/jh3y/pen/mdxggβ¦
How do we get the nice easing curve on :hover? π§
The trick is creating a set of custom properties based on an easing curve π€
For, example the easing curve custom properties for this demo are π
The trick is creating a set of custom properties based on an easing curve π€
For, example the easing curve custom properties for this demo are π
Then to apply this, we need rules that update the --lerp custom property on :hover or :focus for each item or block β¨
This code below caters for selecting 5 blocks with a combination of sibling combinators(+) and :has()π
This code below caters for selecting 5 blocks with a combination of sibling combinators(+) and :has()π
The last thing to do is apply that to the blocks themselves.
I'm also doing something a little fun here too π
Because the blocks are laid out with flexbox, I can use the --lerp value to alter the "flex" of each block πͺ And the translation of each item π
I'm also doing something a little fun here too π
Because the blocks are laid out with flexbox, I can use the --lerp value to alter the "flex" of each block πͺ And the translation of each item π
But, how did I generate those "--lerp" values? The answer is @greensock πͺ
It has an awesome utility for distributing values using easing curves which is exactly what I needed π
I used that to build this demo that generates the code π€
π codepen.io/jh3y/pen/ExEJMβ¦ via @CodePen
It has an awesome utility for distributing values using easing curves which is exactly what I needed π
I used that to build this demo that generates the code π€
π codepen.io/jh3y/pen/ExEJMβ¦ via @CodePen
If you wanna check out the GSAP utils, check them out here!
The one for this was "distribute" π
greensock.com/docs/v3/GSAP/gβ¦
The one for this was "distribute" π
greensock.com/docs/v3/GSAP/gβ¦
For more on CSS :has(), check out the article I wrote for @ChromiumDev π
There are plenty of use cases in there and I'm sure there are still plenty of awesome use cases that people will discover as :has() lands in all the browsers π
developer.chrome.com/blog/has-m105/
There are plenty of use cases in there and I'm sure there are still plenty of awesome use cases that people will discover as :has() lands in all the browsers π
developer.chrome.com/blog/has-m105/
As for that browser support, it's almost there! π€
We've got :has() in Safari already and it lands in Chrome version 105. It's also behind flags in current Chrome releases and Firefox π
Exciting times! π
caniuse.com/css-has
We've got :has() in Safari already and it lands in Chrome version 105. It's also behind flags in current Chrome releases and Firefox π
Exciting times! π
caniuse.com/css-has
And that's it!
Some weekend and evening tinkering led to putting this together π
The motivation was using easing curve values inside custom properties π€
Any questions, hit me up! π
Some weekend and evening tinkering led to putting this together π
The motivation was using easing curve values inside custom properties π€
Any questions, hit me up! π
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
