Défis liés à l'IUG
Il n'existe pas une seule façon de résoudre les problèmes liés aux interfaces. Dans cette série, nous allons nous mettre au défi, ainsi que les uns les autres, de trouver de multiples façons de résoudre les problèmes liés aux interfaces et d'élargir la diversité de nos compétences.
Réfléchir aux moyens de résoudre les palettes de couleurs
Pour le défi de l'interface graphique d'aujourd'hui, @AdamArgyleInk crée une large palette de couleurs avec okLCH, en vérifiant des paires de couleurs accessibles en cours de route, ins...
Trouver des solutions pour résoudre un problème de texte de science-fiction en 3D
Dans le défi de l'IUG du jour, @AdamArgyleInk apporte une touche #CSS à l'effet de texte 3D d'un film de science-fiction classique en le rendant interactif. P...
Réfléchir aux moyens de résoudre le CHANGEMENT DE GROUPE
Lors du défi IUG d'aujourd'hui, @AdamArgyleInk transforme un groupe d'options en un groupe de commutateurs permettant de modifier l'alignement du texte. Découvrez comment tester l'accessibi...
Réfléchir aux moyens de résoudre les effets GLITCH
Lors du défi IUG d'aujourd'hui, @AdamArgyleInk crée un effet de cyber glitch avec des chemins de découpe et des transformations CSS.
Réfléchir aux moyens de résoudre les problèmes PHYSIQUES DE BASE
Lors du défi de l'IUG du jour, @AdamArgyleInk s'amuse de créer des effets physiques dans l'UI avec des propriétés CSS personnalisées, demander un frame d'animation, etc.
Réfléchir aux moyens de résoudre la PILE DE CARTES
Pour le défi de l'interface graphique d'aujourd'hui, @AdamArgyleInk crée une pile animée de cartes en utilisant l'origine de la transformation, la grille et :has().
Réfléchir aux moyens de résoudre les transitions
Aujourd'hui, @AdamArgyleInk code en direct les transitions de chemin de clip CSS, fait la démonstration de certains effets spéciaux et explique comment fonctionne l'IUG. Je...
Réfléchir aux moyens de résoudre les ASTUCES
Pour le défi de l'interface graphique d'aujourd'hui, @AdamArgyleInk crée une info-bulle avec un élément personnalisé (sans composant Web !), :has(), transformations, and logical prop...
Réfléchir aux moyens de résoudre CAFE WALL ILLUSION
Lors du défi de l'IUG du jour, @AdamArgyleInk recrée une illusion classique avec le CSS.
Réfléchir aux moyens de résoudre les CARROUSELS
Lors du défi de l'interface graphique actuel, @AdamArgyleInk présente les caractéristiques et les aspects d'un composant de carrousel: thématisation adaptative, adaptation à divers...
Réfléchir aux moyens de résoudre les boutons d'action flottants
Pour le défi de l'interface graphique d'aujourd'hui, @AdamArgyleInk crée quelques boutons d'action flottants (FAB) et évoque les considérations relatives à l'expérience utilisateur et au CSS ...
Réfléchir aux moyens de résoudre les BUTTONS
Lors du défi de l'interface graphique actuel, @AdamArgyleInk applique un style à tous les types de boutons sur le Web avec des propriétés personnalisées et :where(), pour clair/sombre...
Réfléchir aux moyens de résoudre DIALOG
Aujourd'hui, @AdamArgyleInk montre comment améliorer visuellement l'élément de dialogue tout en conservant une excellente accessibilité et internat...
Réfléchir aux moyens de résoudre une BARRE DE CHARGEMENT
Dans le défi de l'interface graphique d'aujourd'hui, @AdamArgyleInk montre comment styliser l'élément de progression intégré et comment mettre en œuvre une excellente expérience utilisateur de lecteur d'écran, li...
Trouver des moyens de résoudre le problème de FAVICON SVG
Lors du défi de l'IUG aujourd'hui, @AdamArgyleInk partage ses réflexions sur la manière de créer un favicon adaptatif avec le format SVG. Le format SVG offre non seulement une infinité de...
Trouver des moyens de résoudre un CHANGEMENT DE THÈME SOMBRE/LÉGER
Lors du défi IUG d'aujourd'hui, @AdamArgyleInk partage ses réflexions sur la façon de créer un composant de changement de thème. Souvent, un site Web permet de passer au Pixel...
Réfléchir aux moyens de résoudre les TOASTS
Lors du défi de l'interface graphique d'aujourd'hui, @AdamArgyleInk partage ses réflexions sur la manière de créer des toasts, un composant non interactif et passif pour l'interface utilisateur de prov...
Réfléchir à la manière de résoudre le MENU 3D
Dans le défi de l'interface graphique actuel, @AdamArgyleInk partage ses réflexions sur la manière de créer un menu de jeu vidéo en 3D qui s'adapte aux préférences de couleur de l'OS...
Réfléchir à des façons de résoudre les problèmes de type MULTI-SELECT
Dans le défi de l'interface graphique d'aujourd'hui, je partage mes réflexions sur la manière de permettre aux utilisateurs d'effectuer une sélection multiple. Pour illustrer la sélection de plusieurs éléments, j'ai préparé un filtre...
Réfléchir aux moyens de résoudre les BOUTONS SCINÉS
Lors du défi de l'interface graphique d'aujourd'hui, je partage mes réflexions sur la manière de résoudre les problèmes de fractionnement de boutons. Composant incontournable pour les interfaces condensées, il permet à un...
Réfléchir aux moyens de résoudre les CHANGEMENTS
Dans le défi de l'interface graphique d'aujourd'hui, je partage mon réflexion sur la manière de résoudre un changement. Un minuscule composant qui emballe l'expérience utilisateur et qui a fini par être l'un des plus ...
Réfléchir aux moyens de résoudre les BREADCRUMBS
Dans le défi de l'interface graphique d'aujourd'hui, nous avons créé un composant de fil d'Ariane... avec une touche personnelle. Au lieu d'une liste linéaire de liens, ce fil d'Ariane...
Réfléchir aux moyens de résoudre les SCHEMES DE COULEUR
Dans le défi de l'IUG du jour, nous allons créer des jeux de couleurs sombres, claires et sombres avec le code HSL. Le CSS fonctionne sur les navigateurs modernes, établit...
Réfléchir à la manière de résoudre un DÉFILEUR MULTIMÉDIA
Dans le défi de l'interface graphique du jour, @Adam Argyle explique comment créer des expériences de défilement intégré pour le Web qui sont minimes, respo...
Réfléchir aux moyens de résoudre le SPLIT TEXT
Pour le défi de l'interface graphique du jour, @AdamArgyleInk répondra à vos commentaires pendant les 30 premières minutes suivant la sortie de l'épisode. Associer...
Réfléchir aux moyens de résoudre les SETTINGS
Dans le défi de l'interface graphique du jour, nous allons créer et faire la démonstration d'une page de paramètres dynamiques avec des curseurs et des cases à cocher. La page des paramètres est responsive, assistance...
Réfléchir aux moyens de résoudre le système TABS
Dans le défi de l'interface graphique d'aujourd'hui, nous concevons un composant d'onglets avec des fonctionnalités intéressantes auxquelles vous n'avez peut-être pas pensé. Nos onglets...
Mentions de SIDENAV
Nous avons demandé à la communauté de créer un composant de navigation latérale à votre manière, et vous avez terminé ! Découvrez les contributions:
Réfléchir aux moyens de résoudre un SIDENAV
Dans le défi de l'IUG d'aujourd'hui, nous créons une expérience utilisateur réactive et accessible de navigation latérale en utilisant CSS et JS. Le menu de navigation latéral fonctionne...
Mention de CENTERING
Nous avons testé cinq techniques de centrage CSS différentes et nous vous avons mis au défi de nous proposer les vôtres. Nous remercions Chris Coyier de CSS-Tricks ...
Soumission pour STORIES | Défis de l'IUG
Vous m'avez vu créer des histoires à ma façon et je vous ai tous mis au défi de le créer à votre façon. Nous remercions @Geoffrich_ pour sa participation sur Twitter ! À faire…
Réfléchir aux moyens de résoudre le CENTRE
Dans le défi du jour, nous allons effectuer un test de contrainte sur cinq techniques différentes de centrage CSS. Découvrez les techniques qui vous permettront de faire une place dans la section des outils...
Réflexions sur la manière de relever des STORIES | Défis liés à l'IUG
Bienvenue dans les défis GUI où je crée des interfaces à ma façon et vous met au défi de le faire à votre façon. En réunissant nos esprits créatifs, nous allons...