Thinking on ways to solve ADAPTIVE TYPOGRAPHY
In today's GUI Challenge, @AdamArgyleInk shows how to use the prefers-contrast media query to adapt fonts to users contrast preferences. ...
Thinking on ways to solve a MORPHING BUTTON
In today's GUI Challenge, @AdamArgyleInk progressively enhances a multi-state button to morph between states using the super rad View Tra...
Thinking on ways to solve color palettes
In today's GUI Challenge, @AdamArgyleInk builds a wide gamut color palette with okLCH, checking accessible color pairs along the way, ins...
Thinking on ways to solve 3D sci-fi text
In today's GUI Challenge, @AdamArgyleInk puts a #CSS spin on a classic sci-fi movie 3D text effect by making it interactive to scroll. Po...
Thinking on ways to solve SWITCH GROUPS
In today's GUI Challenge, @AdamArgyleInk turns a radio group into a text alignment changing switch group. Learn how to test the accessibi...
Thinking on ways to solve GLITCH effects
In today's GUI Challenge, @AdamArgyleInk creates a cyber glitch effect with CSS clip-paths and transforms.
Chapters:
0:00 - Introduction...
Thinking on ways to solve BASIC PHYSICS
In today's GUI Challenge, @AdamArgyleInk has some fun making physics UI effects with CSS custom properties, request animation frame, and ...
Thinking on ways to solve CARD STACK
In today's GUI Challenge, @AdamArgyleInk creates an animated stack of cards using transform origin, grid and :has().
Chapters:
0:00 - In...
Thinking on ways to solve TRANSITIONS
In today's haunted GUI Challenge, @AdamArgyleInk live codes CSS clip-path transitions, demo's some rad effects, and covers the gotchas. I...
Thinking on ways to solve TOOLTIPS
In today's GUI Challenge, @AdamArgyleInk builds a tooltip with a custom element (no web component!), :has(), transforms, and logical prop...
Thinking on ways to solve CAFE WALL ILLUSION
In today's GUI Challenge, @AdamArgyleInk recreates a classic illusion with CSS.
Chapters:
0:00 - Introduction
0:30 - Story Time
1:22 - ...
Thinking on ways to solve CAROUSELS
In today's GUI Challenge, @AdamArgyleInk shares the features and aspects of a carousel component: adaptive theming, adaptive to various u...
Thinking on ways to solve FABs
In today's GUI Challenge, @AdamArgyleInk builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations ...
Thinking on ways to solve BUTTONS
In today's GUI Challenge, @AdamArgyleInk styles all the web's different button types with custom properties and :where(), for light/dark...
Thinking on ways to solve DIALOG
In today's GUI Challenge, @AdamArgyleInk shows how to visually enhance the dialog element while maintaining great accessible and internat...
Thinking on ways to solve a LOADING BAR
In today's GUI Challenge, @AdamArgyleInk shows how to style the built-in progress element and how to implement great screen reader UX, li...
Thinking on ways to solve SVG FAVICON
In today's GUI Challenge, @AdamArgyleInk shares thinking on a way to build an adaptive favicon with SVG. SVG not only delivers an infinit...
Thinking on ways to solve a DARK/LIGHT THEME SWITCH
In today's GUI Challenge, @AdamArgyleInk shares thinking on a way to build a theme switch component. Often a website will allow switching...
Thinking on ways to solve TOASTS
In today's GUI Challenge, @AdamArgyleInk shares thinking on a way to build toasts, a non-interactive and passive component for UI to prov...
Thinking on ways to solve 3D MENU
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, ...
Thinking on ways to solve MULTI-SELECT
In today's GUI challenge I share my thinking on a way to enable users to multi-select. To demonstrate multi-select I've prepared a filter...
Thinking on ways to solve SPLIT BUTTONS
In today's GUI challenge I share my thinking on a way to solve split buttons. A staple component for condensed interfaces, it allows a si...
Thinking on ways to solve SWITCHES
In today's GUI challenge I share my thinking on a way to solve a switch. A tiny, UX packed component that ended up being one of the most ...
Thinking on ways to solve BREADCRUMBS
In today's GUI challenge, we're building a breadcrumbs component.. with a twist! Instead of a linear list of links, this breadcrumbs comp...