Efeito leve de distorção de água

Ksenia Kondrashova criou uma demonstração com um lindo shader com efeito de água. Parece realista, como a água se movendo em uma piscina. É uma sensação calmante e hipnótica.

Efeito de paralaxe 3D ao pairar

Temani Afif cria efeitos incríveis usando uma única tag de imagem. Este é um ótimo exemplo: uma tag HTML cria um efeito 3D surpreendente… e o código é tão simples! A demonstração requer apenas 18 linhas de CSS!

Saturação seletiva ao passar o mouse

Outra demonstração legal usando um único elemento de imagem. Ana Tudor usou filtros SVG para aplicar uma máscara de interpolação de cores e destacar elementos da imagem com base na cor.

A batata irritante

Você precisará dos alto-falantes para esta divertida demonstração de Sophia Wood (também conhecida como Fractal Kitty). Clique nos botões de som ou pressione os botões 1–8 para fazer a batata falar… mas tenha cuidado, pode ser igualmente divertido e irritante.

Galeria de rodas (somente CSS)

Uma galeria circular animada criada por Chris Bolson. Passe o mouse sobre as imagens e veja-as animadas. Gosto de como o título aparece junto com o movimento da foto. Suave.

imagens da NASA de pontilhismo

Outra demonstração de Sophia Wood. Ela usou P5 para gerar pontos que são gerados infinitamente. A cada ciclo eles ficarão em tamanho menor, revelando uma imagem espacial. Como sempre, uma combinação criativa de arte e código.

mesa verificadora de contraste de cores

Esta é mais uma demonstração de acessibilidade “nerd”: uma grade com todos os nomes de cores CSS e sua combinação de contraste de cores. Dave Rupert usou a especificação WCAG 2.1 para determinar os resultados.

Sinal do meu quintal

Chris Coyier replica este sinal icônico, aplicando animações orientadas por rolagem para fazer com que todas as linhas ajustem dinamicamente (o texto é editável) sua fonte para que todas as linhas ocupem a mesma largura. Por usar a propriedade Animation-range, esta demonstração funcionará apenas no Chrome.

Pilha de cartões animados com rolagem e eventos de snap de rolagem

Paul Noble cria uma pilha de cartas impressionante combinando animações baseadas em rolagem com eventos de rolagem instantânea. Você precisa usar um trackpad (esta demonstração não funciona com um mouse) para aproveitar as belas transições.

Progresso duplo rápido

Mais uma demo de Ana Tudor. O código é limpo, curto e semântico. Gostei do design deste componente (de uma pergunta do Reddit?) E pude me ver usando algo semelhante em alguns projetos.

Se você gostou desta lista, confira as demonstrações do mês passado!