Não existe uma única maneira de resolver os desafios da interface. Nesta série, vamos desafiar a nós mesmos e uns aos outros para encontrar várias maneiras de resolver desafios de interface e expandir a diversidade das nossas habilidades.
No desafio de GUI de hoje, @AdamArgyleInk criou uma ampla paleta de cores com o okLCH, verificando pares de cores acessíveis ao longo do processo, ins...
No desafio de GUI de hoje, @AdamArgyleInk coloca #CSS no efeito de texto 3D de um filme de ficção científica clássico, tornando a rolagem interativa. Po...
No desafio de GUI de hoje, @AdamArgyleInk transforma um grupo de opções em um grupo de alternância de alinhamento de texto. Aprenda a testar o acesso...
No desafio de GUI de hoje, @AdamArgyleInk cria um efeito de falha cibernética com clip-paths e transformações de CSS.
No desafio de GUI de hoje, @AdamArgyleInk se diverte criando efeitos físicos de interface com propriedades personalizadas de CSS, solicitar frame de animação e ...
No desafio de GUI de hoje, @AdamArgyleInk cria uma pilha animada de cards usando a origem de transformação, a grade e :has().
No desafio assombrado da GUI de hoje, o @AdamArgyleInk codifica as transições de caminho de clipe do CSS em tempo real, demonstrações e alguns efeitos incríveis e pegadinhas. Eu...
No desafio da GUI de hoje, @AdamArgyleInk criou uma dica com um elemento personalizado (sem componente da Web), :has(), transformações e propriedade lógica...
No desafio da GUI de hoje, @AdamArgyleInk recria uma ilusão clássica com CSS.
No desafio de GUI de hoje, @AdamArgyleInk compartilha os recursos e aspectos de um componente de carrossel: temas adaptáveis, adaptáveis a vários...
No desafio de GUI de hoje, @AdamArgyleInk cria alguns botões de ação flutuantes (FABs) e fala sobre as considerações de UX e CSS ...
No desafio de GUI de hoje, @AdamArgyleInk define o estilo de todos os diferentes tipos de botão da Web com propriedades personalizadas e :where(), para claro/escuro...
No desafio de GUI de hoje, @AdamArgyleInk mostra como melhorar visualmente o elemento da caixa de diálogo, mantendo uma ótima experiência de acessibilidade e interação.
No desafio de GUI de hoje, @AdamArgyleInk mostra como estilizar o elemento de progresso integrado e como implementar uma ótima UX de leitor de tela, s...
No desafio de GUI de hoje, @AdamArgyleInk fala sobre como criar um favicon adaptável com o SVG. O SVG não só entrega um infinito...
No desafio de GUI de hoje, @AdamArgyleInk fala sobre como criar um componente de mudança de tema. Muitas vezes, um site permite a mudança de...
No desafio de GUI de hoje, @AdamArgyleInk compartilha ideias sobre uma maneira de criar avisos, um componente não interativo e passivo para que a IU prove...
No desafio de GUI de hoje, @AdamArgyleInk compartilha o que pensa sobre como criar um menu de videogame em 3D que se adapta às preferências de cores do SO...
No desafio de GUI de hoje, compartilho minha visão sobre uma forma de permitir que os usuários selecionem várias opções. Para demonstrar a seleção múltipla, preparei um filtro...
No desafio de GUI de hoje, vou compartilhar meu raciocínio sobre uma forma de resolver botões de divisão. Componente essencial para interfaces condensadas, ele permite s...
No desafio da GUI de hoje, compartilho meu raciocínio sobre uma forma de resolver a questão. Um pequeno componente de UX que acabou sendo um dos ...
No desafio de GUI de hoje, estamos criando um componente de navegação estrutural. Em vez de uma lista linear de links, esta localização atual comp...
No desafio da GUI de hoje, estamos criando esquemas de cores escuros, claros e escuros com HSL. O CSS funciona em navegadores modernos, estabelece...
No desafio de GUI de hoje, @Adam Argyle compartilha suas ideias sobre maneiras de criar experiências de rolagem inline para a Web que são mínimas, rápidas...

Pensando em maneiras de resolver o SPLIT TEXT

No desafio da GUI de hoje, @AdamArgyleInk responderá seus comentários nos primeiros 30 minutos após o lançamento do episódio. Conectar...
No desafio da GUI de hoje, criamos e demonstramos uma página de configurações dinâmicas com controles deslizantes e caixas de seleção. Nossa página de configurações é responsiva. Suporte...
No desafio da GUI de hoje, estamos criando um componente de guias com recursos muito interessantes que talvez você não tenha pensado. Nossas guias...
Pedimos à comunidade para construir um componente de navegação lateral do seu jeito e vocês entregaram! Confira os envios:
No desafio da GUI de hoje, criamos uma experiência do usuário de navegação lateral responsiva e acessível usando CSS e JS. A navegação lateral funciona...
Fizemos um teste de cinco técnicas diferentes de centralização de CSS e sugerimos que você envie sua própria. Agradeça a Chris Coyier da CSS-Tricks ...
Você me viu criar histórias do meu jeito e eu desafiei vocês a fazerem do seu jeito. Agradecemos o envio de @Geoffrich_ no Twitter! Você pode:
No desafio de hoje, vamos testar cinco técnicas diferentes de centralização de CSS. Veja quais técnicas devem ganhar um lugar na sua ferramenta...
Bem-vindo aos Desafios da GUI, onde crio interfaces do meu jeito e desafio o usuário a fazer do seu jeito. Com nossas mentes criativas combinadas, vamos...