DEV Community

Cover image for Windows 10 calendar hover effect using HTML, CSS, and vanilla JS

Windows 10 calendar hover effect using HTML, CSS, and vanilla JS

Jash Gopani on April 28, 2021

Table of Contents Introduction Observations Getting Started Fine Tuning Grid Effect Additional Resources Introduction Welc...
Collapse
 
drumstix42 profile image
Mark

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.

Collapse
 
jashgopani profile image
Jash Gopani

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 😃

Collapse
 
drumstix42 profile image
Mark

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.

Thread Thread
 
jashgopani profile image
Jash Gopani

It wasn't rude at all bro.😁

Collapse
 
ankkaya profile image
Ankkaya

Great work, bro

Collapse
 
the_riz profile image
Rich Winter

Dude, this is super cool and a great post-set! Thank you for sharing.

I do have some serious issues with your code.

  1. (From the earlier article - Never substitute a fancy div for a <button> if what you want is a button.)
  2. In CSS going 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.
  3. Right now, as it stands, the mobile display is wonky for me.
  4. Perf wise maybe a bunch of transparent divs over a canvas to do the drawing? Because...
  5. Not knowing the original, I wonder how you would handle highlights a dragged range of dates...
  6. Of course, it is a matter of taste, but putting anything in the * CSS selector other than box-sizing:border-box; in a * selector is unusual. ESPECIALLY putting a text-transform: capitalize !important; or ANY !important selector is very odd. The html/body selectors are more appropriate. Even variable definitions usually live at :root
Collapse
 
jashgopani profile image
Jash Gopani

Hi @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,

  1. My aim was to give effect to any non-input element...button/div/p/span etc. So I just used div for demonstration purpose and win-btn class 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.
  2. Accessibility wise it is not a good practice to remove the outline, but again I didn't care about accessibility in this.
  3. More than a matter of taste, I was not building a big production application, this is just a small piece of code where I wanted everything to be in upper case..hence the approach.

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 *)

Collapse
 
jashgopani profile image
Jash Gopani

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 :)

Collapse
 
sandesh3 profile image
Sandesh Goli

Mind-blowing...

Collapse
 
fischgeek profile image
fischgeek

Very cool you figured out how to recreate a part of Microsoft Fluent in vanilla web.

Collapse
 
jashgopani profile image
Jash Gopani

Yes..my primary purpose was to share the approach of creating the effect.😃

Collapse
 
mihirgandhi profile image
Mihir Gandhi

Great series Jash! Excited for your upcoming articles.

Collapse
 
jashgopani profile image
Jash Gopani

Thanks a lot😁

Collapse
 
afternoonpm profile image
AfterNoonPM

...(mind blown🤔)...