Yes, you're right! Thanks for pointing this out @drumstix42
. This can be done via some smart CSS. Even I found this codepen when I was looking for implementations. I played a bit with the code to understand how this actually works.
Why didn't I prefer the SCSS way?
I found that there is another layer created below the grid, and between those 2 grids, there is a spotlight that follows the cursor, and to hide that spotlight outside the calendar area, the grid is surrounded by 4 extra elements, if you remove those, then the spotlight will be visible outside the calendar also.
Imagine implementing this effect for a component library where you don't know what type of elements users are going to pass in your grid component...I don't prefer extra elements and hardcoded CSS which would be there just to cover up side effects.
Since the majority of beginners use CSS and you don't need a separate compiler for CSSI wanted to use that 😬
People reading this should know that,
The codepen you shared is just a different perspective of looking at the effect. The author of the codepen visualized the effect in 3d and in terms of layers, whereas I thought about it in a 2d plane. There can be another approach also. If you have any to share here, I would love to see those 😃
Thanks for the follow up! Hopefully my original comment didn't come off as rude, as it wasn't meant to!
Good explanation, and it's always good to explore multiple avenues of approaching a problem.
Yes, you're right! Thanks for pointing this out @drumstix42 . This can be done via some smart CSS. Even I found this codepen when I was looking for implementations. I played a bit with the code to understand how this actually works.
Why didn't I prefer the SCSS way?
I found that there is another layer created below the grid, and between those 2 grids, there is a spotlight that follows the cursor, and to hide that spotlight outside the calendar area, the grid is surrounded by 4 extra elements, if you remove those, then the spotlight will be visible outside the calendar also.
Imagine implementing this effect for a component library where you don't know what type of elements users are going to pass in your grid component...I don't prefer extra elements and hardcoded CSS which would be there just to cover up side effects.
Since the majority of beginners use CSS and you don't need a separate compiler for CSSI wanted to use that 😬
People reading this should know that,
The codepen you shared is just a different perspective of looking at the effect. The author of the codepen visualized the effect in 3d and in terms of layers, whereas I thought about it in a 2d plane. There can be another approach also. If you have any to share here, I would love to see those 😃
Thanks for the follow up! Hopefully my original comment didn't come off as rude, as it wasn't meant to!
Good explanation, and it's always good to explore multiple avenues of approaching a problem.
It wasn't rude at all bro.😁