Tag GUIchallenges
Tìm kiếm bài viết trong Tag GUIchallenges
Thinking on ways to solve PICKLISTS
In today's GUI Challenge, @AdamArgyleInk shows how to leverage checkbox and radio groups for highly functional and beautiful picking experiences. Learn about implicit vs explicit label and input relat
0 0 26
Thinking on ways to solve HALLOWEEN PROJECTIONS
In today's GUI Challenge, @AdamArgyleInk makes a spooky Halloween infinite skull animation for use as a screensaver or wall projection. 0:00 - Introduction. 0:35 - Overview. 1:58 - Grid pile.
0 0 16
Thinking on ways to solve RELATIVE COLORS
In today's GUI Challenge, @AdamArgyleInk shows you the CSS relative color syntax for creating color variants based on another color. 17 examples and use cases are shown to help you learn the capabilit
0 0 15
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. Contrast is about more than just color.
0 0 22
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 Transitions api. 0:00 - Introduction.
0 0 22
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, inspecting color with devtools, and showing many other neat tricks
0 0 30
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. Powered by CSS scroll linked animations as specified by the lates
0 0 27
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 24
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 29
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 27
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 25
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 29
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 32
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 31
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 26
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 30
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 36
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 29
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 34
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 30
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 29