🎨 Thinking on ways to solve color palettes
by @argyleink @argyleink at @ChromiumDev

#GUIchallenges #CSS #ChromeDeveloper #webdev #color #OKLCH

https://youtu.be/6aCsAMgwnjE

RT @[email protected]

🆕 #GUIchallenges
Thinking on styling `<button>` elements

I style all the web's different button types with custom properties and :where(), for light/dark adaptive buttons that are easy to make new variants with 💀🤘🏻

links to blog, youtube, and more 👇🏻

🐦🔗: https://twitter.com/argyleink/status/1527089265204666368

RT @[email protected]

🆕 #GUIchallenges
Thinking on <dialog> components

how to add animation, events, light dismiss and more!

Blog's got all the details https://web.dev/building-a-dialog-component/
YouTube overview https://www.youtube.com/watch?v=TD1QxlGgIPk
GitHub source https://github.com/argyleink/gui-challenges
Try it https://gui-challenges.web.app/dialog/dist/

🐦🔗: https://twitter.com/argyleink/status/1514304912842129410

RT @[email protected]

🆕 #GUIchallenges
Building a light/dark adaptive SVG favicon

Watch → https://www.youtube.com/watch?v=4pJahmCR8kQ&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
Read and build → https://goo.gle/3uASh1s
Try a demo → https://goo.gle/3GAzzt4
Get the source → https://goo.gle/3ov8x08

🐦🔗: https://twitter.com/ChromiumDev/status/1491474241300037633

RT @[email protected]

🆕 #GUIchallenges
Thinking on ways to build Toasts

Toasts? 🤔
passive, non-interactive UI feedback components 🤓

✅ YouTube https://www.youtube.com/watch?v=R75ZVW4LW5o&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
✅ http://web.dev post https://web.dev/building-a-toast-component/
✅ Demo https://gui-challenges.web.app/toast/dist/

🐦🔗: https://twitter.com/argyleink/status/1468620728052305924

RT @[email protected]

🆕 #GUIchallenges
Thinking on ways to build a 3D menu

Watch → https://www.youtube.com/watch?v=HCsV8u-KYUw
Read along → https://goo.gle/3c3oILb
Try a demo → https://goo.gle/3bWNSLz
Get the source → https://goo.gle/3wulnOO

Thought the Japanese translated version turned out super rad!

🐦🔗: https://twitter.com/argyleink/status/1458511247129726980

RT @[email protected]

🆕 GUI Challenge
Thinking on a split-button component

Try it
https://gui-challenges.web.app/split-buttons/dist/
Watch it
https://www.youtube.com/watch?v=Qcpru-fIgwk
I blogged it
https://web.dev/building-a-split-button-component/

Moar #GUIchallenges
https://www.youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ

[video alt]
visual tour of the component's themes and keyboard accessibility

🐦🔗: https://twitter.com/argyleink/status/1435649381735227396

RT @[email protected]

🆕 GUI Challenge
Thinking on ways to build a switch

[video alt](fun show moment)
apparently a 1px switch can be swiped 1px..! a switch, but tiny 🤣

Video
https://www.youtube.com/watch?v=_KqccADghcA&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
Article
https://web.dev/building-a-switch-component/
Moar #GUIchallenges
https://www.youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ

🐦🔗: https://twitter.com/argyleink/status/1425504785956970498