Tag GUIchallenges

Tìm kiếm bài viết trong Tag GUIchallenges

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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

- vừa được xem lúc

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