Let's start.
backdrop-filter: blur(4px);
ez hehe.
Low-effort pretty eh?
- Why are the buttons displacing on click?
https://user-images.githubusercontent.com/61280281/162825295-830e7ae4-4cc3-4137-a9d5-31a6e47d45e2.mp4
I understand the effect you want to create.
But essentially movement/displacement of elements is not preferred. Why do you think CLS
is part of the lighthouse score? Why do you think marquee
tag is obsolete?
I vaguely remember Kartik telling me once; how it is not a good practice if elements are displaced/moved on interaction.
Sleek transitions are alright, but maybe not this?
Why? Because if you see the video again, the div
is moving, not the cross-icon
.
I will give a simple example. Let's say you have a transition where the underline-offset
goes from 4px
to 2px
on hover, so you will change the underline offset right? You do not bring the text closer to the underline and change the line-height
or translateY()
💀
When we say transition: you can play around with shadows, blurs, and opacities to give effects, not directly to the parent body.
- From the 0th effect^ we get the blur effect, however for object content, why don't we add a differentiating factor, like extra blue, since that part can be scrollable based on the content size.
https://user-images.githubusercontent.com/61280281/162827206-b00b68d3-bfc3-4c3f-909d-6e60b474a059.mp4
Right, now it is like this because we had a common class.
But you get the point right.
enhancement