argyleink / gui-challenges

Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.
https://youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
Apache License 2.0
2.84k stars 397 forks source link

Game menu #202

Open vasilich6107 opened 1 year ago

vasilich6107 commented 1 year ago

We can also add something like

.menu-3d .button-set-3d > li:is(:hover, :focus-visible):not(:active) {
  --menu-3d-distance: 3vmax;
}

.menu-3d .button-set-3d > li button:not(:active) {
  transition-timing-function: var(--menu-3d-bounce-ease);
  transition-duration: 0.4s;
}

to reduce glitch when button popus up and automatically loses focus) When we move the mouse relatively slowly.

Mostly relates to top most and bottom most buttons)

argyleink commented 1 year ago

oh like this mitigates the hover effect that move the button in or out of the mouse's hover target zone? able to make a codepen or video that compares them for me?

vasilich6107 commented 1 year ago

Will try to