Tag GUIchallenges
Tìm kiếm bài viết trong Tag GUIchallenges
Thinking on ways to solve SWITCH GROUPS
In today's GUI Challenge, Adam Argyle 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
0 0 1
Thinking on ways to solve GLITCH effects
In today's GUI Challenge, @AdamArgyleInk creates a cyber glitch effect with CSS clip-paths and transforms. 0:00 - Introduction. 0:38 - Overview. 2:00 - Debugging Corner.
0 0 2
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 some Javascript. 0:00 - Introduction.
0 0 4
Thinking on ways to solve CARD STACK
In today's GUI Challenge, @Adam Argyle creates an animated stack of cards using transform origin, grid and :has(). 0:00 - Introduction. 0:35 - Overview. 2:21 - Debugging Corner.
0 0 7
Thinking on ways to solve TRANSITIONS
In today's haunted GUI Challenge, @Adam Argyle live codes CSS clip-path transitions, demo's some rad effects, and covers the gotchas. If you don't know clip-path, you will by the end.
0 0 10
Thinking on ways to solve TOOLTIPS
In today's GUI Challenge, @Adam Argyle builds a tooltip with a custom element (no web component!), :has(), transforms, and logical properties. Besides a small backup script for the usage of :has(), it
0 0 11
Thinking on ways to solve CAFE WALL ILLUSION
In today's GUI Challenge, @Adam Argyle recreates a classic illusion with CSS. 0:00 - Introduction. 0:30 - Story Time. 1:22 - Overview.
0 0 12
Thinking on ways to solve CAROUSELS
In today's GUI Challenge, @Adam Argyle shares the features and aspects of a carousel component: adaptive theming, adaptive to various user input types, adaptive to author time options, and adaptive to
0 0 7
Thinking on ways to solve FABs
In today's GUI Challenge, @Adam Argyle builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations for fixed position buttons on the web. 0:00 - Introduction.
0 0 11
Thinking on ways to solve BUTTONS
In today's GUI Challenge, @Adam Argyle styles 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. 0:00 -
0 0 15
Thinking on ways to solve DIALOG
In today's GUI Challenge, @Adam Argyle shows how to visually enhance the dialog element while maintaining great accessible and international UX. 0:00 - Introduction.
0 0 12
Thinking on ways to solve a LOADING BAR
In today's GUI Challenge, @AdamArgyle shows how to style the built-in progress element and how to implement great screen reader UX, light and dark adaptive colors, custom animations and more. 0:00 - I
0 0 11
Thinking on ways to solve SVG FAVICON
In today's GUI Challenge, @Adam Argyle shares thinking on a way to build an adaptive favicon with SVG. SVG not only delivers an infinitely scalable icon, it also allows inlining styles that can hook i
0 0 17
Thinking on ways to solve a DARK/LIGHT THEME SWITCH
In today's GUI Challenge, @Adam Argyle shares thinking on a way to build a theme switch component. Often a website will allow switching the theme to something other than the system preference and thes
0 0 17
Thinking on ways to solve TOASTS
In today's GUI Challenge, @Adam Argyle shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animat
0 0 12
Thinking on ways to solve 3D MENU
In today's GUI challenge @Adam Argyle share's their 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 a
0 0 17
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 filterable grid which accepts input from both a -select multiple- and
0 0 19
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 single button to feature secondary actions.
0 0 12
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 involved challenges so far.
0 0 14
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 component exposes all of it's siblings in a dropdown, allowing fast
0 0 10
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 foundational architecture for more themes, and is accessible.
0 0 6