Thinking on ways to solve ​​3D MENU

Thinking on ways to solve ​​3D MENU

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=HCsV8u-KYUw


Duration: 0:00
13,571 views
499

In today's GUI challenge ‪@AdamArgyleInk‬ shares his thinking on a way to create a 3D video game menu that adapts to OS color preferences, motion preferences, and is accessible to mouse and keyboards alike.

Chapters:
0:00 - Introduction
0:20 - Overview
2:37 - HTML
2:58 - Layout
4:14 - Perspective
5:20 - Animation
7:15 - Menu Styles
10:14 - List Item Styles
10:35 - Button Styles
11:35 - Hover & Focus
12:48 - Pseudo Elements
14:55 - DevTools Review
16:45 - JavaScript
17:48 - Mouse Parallax
19:30 - Outro

Resources:
Read along → https://goo.gle/3c3oILb
Try a demo → https://goo.gle/3bWNSLz
Get the source → https://goo.gle/3wulnOO

Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#GUIchallenges #CSS #ChromeDeveloper



Other Videos By Chrome for Developers


2021-12-01Two-factor authentication workshop with WebAuthn | Workshop
2021-11-30Bringing bounce and elastic easing to CSS | HTTP 203
2021-11-22Designcember is coming!
2021-11-19SVGcode: A PWA to convert raster images to SVG vector graphics
2021-11-16New in Chrome 96: Improvements for installed PWAs, Priority Hints, and more!
2021-11-15Building a more private web
2021-11-15The new responsive design
2021-11-15Understanding performance with Core Web Vitals
2021-11-15How leading developers build innovative web experiences
2021-11-12Chrome 96 - What’s New in DevTools
2021-11-10Thinking on ways to solve ​​3D MENU
2021-11-09Yes, we use a Joy-Con to change slides. Here's how… | HTTP 203
2021-11-03Chrome Dev Summit 2021 livestream
2021-11-03Chrome Dev Summit 2021 recap
2021-11-03Chrome Dev Summit 2021 | Keynote: What's new in Chrome
2021-10-29Customize media notifications and playback controls outside the browser
2021-10-21Identify potential CSS improvements with the CSS Overview panel #DevToolsTips
2021-10-19New in Chrome 95: URLPattern, the Eye Dropper API, new origin trials, and more!
2021-10-19Are SPAs better than MPAs? | HTTP 203
2021-10-14Chrome 95 - What’s New in DevTools
2021-10-13Thinking on ways to solve ​​MULTI-SELECT