Tag GUIchallenges

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

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

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 10

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

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 3

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

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 2

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

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 10

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

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 9

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

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 17

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

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 12

- 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 12

- 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 15

- 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 15

- 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 15

- 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 19

- 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 19

- 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 19

- 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 14

- 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 18

- 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 23

- 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 17

- 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 19

- 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 24

- 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 21