Casos completos
Escolha um caso completo, veja o resultado diretamente, modifique o código-fonte e execute-o no navegador.
CSS botão em degradê
Um conjunto de botões gradientes modernos com brilho, contorno e feedback de pressão.
Abrir e executarCaixa de diálogo modal
Use o elemento dialog nativo para implementar uma caixa de diálogo de confirmação acessível.
Abrir e executarPainel sanfonado
Componente de acordeão para perguntas frequentes com suporte a teclado e expansão suave.
Abrir e executarTroca de abas
Componente de abas com navegação por teclas de direção e animação de alternância de conteúdo.
Abrir e executarTabela de dados responsiva
Lista de pedidos que alterna automaticamente entre tabela no desktop e cartões de informação no mobile.
Abrir e executarLinha do tempo vertical
Linha do tempo responsiva para exibir o andamento do projeto e os marcos principais.
Abrir e executarGrade de cartões responsiva
Use o CSS Grid para criar cartões com tema de viagem que se reorganizam automaticamente.
Abrir e executarMenu de navegação suspenso
Navegação responsiva que equilibra a interação por hover no desktop e por toque no mobile.
Abrir e executarAnimação criativa de carregamento
Efeitos visuais de pulso orbital e progresso de carregamento feitos puramente com CSS.
Abrir e executarAnimação de texto de máquina de escrever
Use a animação de passos CSS para simular o texto aparecendo caractere por caractere e o cursor piscando.
Abrir e executar3D cartão de virar
Cartão informativo tridimensional operável com mouse, toque e teclado.
Abrir e executarAnimação de taiji giratório
Um símbolo do yin-yang desenhado e girado apenas com a forma gráfica CSS.
Abrir e executarContagem regressiva de atividades
Cronômetro regressivo configurável em minutos, com suporte a pausar, continuar e reiniciar.
Abrir e executarCalculadora simples
Calculadora básica de quatro operações com entrada por teclado e operações contínuas.
Abrir e executarPesquisa em lista em tempo real
Filtre cidades instantaneamente ao digitar palavras-chave e destaque os resultados correspondentes.
Abrir e executarValidação instantânea de formulário
Formulário de cadastro com estado em tempo real, mensagens de erro e feedback de envio.
Abrir e executarEfeito de neve romântica
Cena de neve em tela cheia com quantidade de neve e direção do vento ajustáveis, Canvas.
Abrir e executarCanvas efeito de fogos de artifício
Efeito interativo de partículas que faz fogos de artifício coloridos explodirem ao clicar no céu noturno.
Abrir e executarRelógio analógico
Um mostrador mecânico refinado que gira em tempo real conforme a hora local.
Abrir e executarEfeito de rastro de partículas
Partículas coloridas que fluem seguindo o movimento do mouse ou do toque.
Abrir e executarSeletor segmentado da sala de reunião
Complete um seletor segmentado em um cenário de sala de reuniões: inclui conteúdo realista, controles interativos, feedback de estado claro e layout responsivo a diferentes tamanhos.
Abrir e executarFormulário de inscrição de voluntários com validação em tempo real
Formulário com validação em tempo real para cenário de inscrição de voluntários: inclui conteúdo realista, controles acionáveis, feedback de status claro e layout responsivo a diferentes tamanhos de tela.
Abrir e executarMenu principal responsivo para guia de museu
Conclua o menu principal responsivo no cenário de guia de museu: inclui conteúdo real, controles interativos, feedback de status claro e layout responsivo a diferentes tamanhos.
Abrir e executarDiálogo de confirmação de revisão de documento
Conclua a caixa de diálogo de confirmação no cenário de revisão de documentos: inclui conteúdo real, controles acionáveis, feedback claro de status e layout responsivo a vários tamanhos.
Abrir e executar