Table of Contents
Introduction
Observations
Getting Started
Fine Tuning Grid Effect
Additional Resources
Introduction
Welc...
For further actions, you may consider blocking this person and/or reporting abuse
Pretty interesting approach. Ultimately, I think some cleverly implemented CSS borders/backgrounds with a moving "spotlight", is a much simpler (and, imo, better) approach. It achieves the same effect with less of a performance/overhead impact.
See here: codepen.io/gubb/pen/PdZqKy
It includes some different themes, and a few of the dates have a specialized transform to showcase a "selected" date transition/custom styling.
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.😁
Great work, bro
Dude, this is super cool and a great post-set! Thank you for sharing.
I do have some serious issues with your code.
<button>if what you want is a button.)button:focus { outline: none; }, while perhaps improving styling, kills keyboard navigation! Now you have a completely "inaccessible" calendar. Unless you replace that setting, there are no visual clues that the user has highlighted anything.box-sizing:border-box;in a * selector is unusual. ESPECIALLY putting atext-transform: capitalize !important;or ANY !important selector is very odd. Thehtml/bodyselectors are more appropriate. Even variable definitions usually live at:rootHi @the_riz ,
Thank you for going through all the posts and giving your feedback 🙂
I did not get your points 3,4,5; if you could elaborate on that, please...
For the rest,
win-btnclass name is just for analogy purpose. In actual apps, it can be any target element. So the purpose was not at all to replace the button; it was just for demo.This is definitely not the best CSS code, I agree...its just that I wanted to create this quickly and many things were trial and error based.😂
Hope you get my point (*Don't think of this reply as a rude one,🙈 as it isn't meant to *)
You can use this effect where items are arranged in grid like app drawer, calendar, calculator buttons...
Most importantly, I wanted to share my approach of implementing this effect because working on this help me learn new things :)
Mind-blowing...
Very cool you figured out how to recreate a part of Microsoft Fluent in vanilla web.
Yes..my primary purpose was to share the approach of creating the effect.😃
Great series Jash! Excited for your upcoming articles.
Thanks a lot😁
...(mind blown🤔)...