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 ...
GUI Challenges
There is no one way to solve interfaces challenges.
In this series, we'll be challenging ourselves and each other
to find multiple ways to solve interface challenges
and expand the diversity of our skills.
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...
Thinking on ways to solve COLOR SCHEMES
In today’s GUI challenge, we’re building dark, light and dim color schemes with HSL. The CSS works across modern browsers, establishes fo...
Thinking on ways to solve a MEDIA SCROLLER
In today’s GUI challenge, @Adam Argyle shares thinking on ways to create inline scrolling experiences for the web that are minimal, respo...
Thinking on ways to solve SPLIT TEXT
In today’s GUI challenge, @AdamArgyleInk will be responding to your comments for the first 30 minutes after the episode releases. Connect...
Thinking on ways to solve SETTINGS
In today’s GUI challenge, we build and demo a dynamic settings page with sliders and checkboxes. Our settings page is responsive, support...
Thinking on ways to solve TABS
In today’s GUI challenge, we’re building a tabs component with some really cool features that you may not have thought about. Our tabs co...
Submission shoutouts for SIDENAV
We asked the community to build a sidenav component your way and you all delivered! Check out the submissions:
@a_nurella → http://goo.gl...