2 Jan 2024
We built a comparison slider in the recent #GUIChallenge.
The comparison slider scales with the viewport, works across all devices, and—the best part—you can use your keyboard!
Dive in ⚡️ → goo.gle/3NPbUeL
ALT “Compare” is written across the top with two animated people facing each other on the right side. GUI Challenges is written in the bottom left corner with an animated version of the host, Adam, next to it.
1
7
31
9,569
18 Oct 2023
#GUIChallenge...but make it spooky 🎃🕸🦇🌙
Tune in to make a spooky Halloween infinite skull animation for use as a screensaver or wall projection.
goo.gle/3M8nkcW
ALT GUI Challenge video thumbnail showing the host's animated character looking like a zombie, and a spooky bright green skull projection. Title reads Spooky Projections
1
17
9,910
16 Aug 2023
Contrast is about more than just color — use the prefers-contrast media query to adapt fonts!
In the new #GUIChallenge, @argyleink walks you through how to make adaptive typography that changes based on the user's contrast preferences → goo.gle/47wKJh3
11
54
12,358
13 Jul 2023
In today's #GUIChallenge we're building a morphing button → goo.gle/3DbiKWb
Using View Transitions API, @argyleink progressively enhances a multi-state button to morph between states. Watch the video and try it out for yourself!
11
98
15,551
17 May 2023
Build a wide gamut color palette with okLCH in today's #GUIChallenge → goo.gle/433cAlT
@argyleink walks you through checking accessible color pairs, inspecting color with devtools, and tricks for leveraging the features of this new web color space.
ALT Color pallet card
5
37
18,478
12 Apr 2023
Put a CSS spin on a classic sci-fi movie 3D text effect by making it interactive to scroll!
@argyleink walks us though the specifics in this #GUIChallenge → goo.gle/3KVg6sq
2
9
38
12,510
9 Mar 2023
In the new #GUIChallenge, our host @argyleink turns a radio group into a text alignment changing switch group.
Learn how to test the accessibility, change the layout, and add a few affordances that round out the component → goo.gle/3TbaWuT
3
4
30
9,519
1 Feb 2023
It’s a new #GUIChallenge for a new year! In this episode, @argyleink gives a nod to the future with a glitch effect challenge. 🤖
Explore the rad, randomized, and sometimes spooky process from clip path to debugging → goo.gle/3DusmvK
1
6
21
7,983
28 Dec 2022
Physics UI effects coming your way! 💨
In today’s #GUIChallenge, @argyleink dives into CSS custom properties, request animation frame, and some Javascript to play with physics.
Watch → goo.gle/3WLWhHd
1
17
103
25,165
23 Nov 2022
🃏 It's all fun and games on the latest #GUIChallenge!
@argyleink creates an animated stack of cards using transform origin, grid, and :has().
Watch now → goo.gle/3GHddtB
35
203
5 Oct 2022
On today’s #GUIChallenge, check out a tooltips tutorial! 🔧 → goo.gle/3RyT1vS
@argyleink gives the download on tooltips versus toggletips, screen reader UX, :has(), and more.
3
10
43
24 Aug 2022
🏁 Join us for a light-hearted #GUIChallenge this week!
In this episode, @argyleink explores the Cafe Wall illusion, building it from scratch and debugging it with DevTools.
But there’s more than one route to making this illusion. ✨ Try it your way → goo.gle/3POz0k3
4
6
43
29 Jul 2022
The most complex #GUIChallenge component so far: CAROUSELS! 🤯
In this episode, @argyleink discusses adaptive theming, adaptive to various user input types, adaptive to author time options, and adaptive to user preferences.
Watch here → goo.gle/3voIc7s
3
11
77
20 Jul 2022
Frosted glass effect made with CSS and HTML SVG filters.
Curious how I did it? 🧵👇
Inspired by @sixstreetunder
#GUIChallenge #glassmorphism
1
2
29 Jun 2022
Are you up for the challenge? 💪
@argyleink builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations for fixed position buttons on the web.
Follow along on the latest #GUIchallenge → goo.gle/3ud7IM2
4
9
61
2 Jun 2018
Gostei de um vídeo @YouTube youtu.be/DSjeDxlDBa4?aME DESAFIARAM DE NOVO? - Me diga se deu certo! | GuiChallenge #2
3