Talvez você não reconheça o nome, mas muito provavelmente já clicou em algum link do Codrops, blog sobre desenvolvimento web mantido por Manoela Ilic e Pedro Botelho, com grande foco em interaction design e UX.
Neste artigo compilei os 10 melhores posts de experimentos de interfaces publicados no Codrops. Independente desta seleção, recomendo muito que você perca algumas horas lendo os artigos e conferindo todas as demos do site.
Os experimentos contemplam efeitos de hover em imagens, modais, botões, galerias e formulários. Façam bom proveito!
BookBlock
artigo | demo | código-fonte
BookBlock é um plugin jQuery que habilita uma navegação estilo livro em qualquer tipo de conteúdo. O link de demonstração inclui diversos exemplos, desde uma simples galeria de fotos até uma navegação fullscreen.
Stack Slider
artigo | demo | código-fonte
Segundo o seu criador, este é um plugin altamente experimental que brinca com CSS3 transforms e efeitos de perspectiva. O resultado final é algo bem diferente do que estamos acostumados a ver em galerias de imagens. O plugin ainda implementa um flow contínuo bem bacana.
Stapel
artigo | demo | código-fonte
Outro efeito legal para galerias desenvolvido pelo pessoal do Codrops é o plugin jQuery Staple, que agrupa e empilha diferentes fotos e, além disso, se auto-ajusta no tamanho do viewport.
Page Transitions
artigo | demo | código-fonte
Neste artigo, o autor apresenta uma séria de transições de páginas utilizando apenas CSS, sem JavaScript. Os exemplos incluem desde técnicas simples de sliding até transições 3D.
Modal Window Effects
artigo | demo | código-fonte
Este experimento, publicado recentemente, é um dos meus favoritos. O artigo mostra 19 exemplos de janelas modais, com efeitos bem diferentes e fluidos.
Caption Hover Effects
artigo | demo | código-fonte
O que me impressiona nas demos do Codrops é que elas são extremamente simples e, mesmo assim, impactantes. Com esses efeitos de hover em imagens não é diferente. Mais uma vez, sem nenhum JavaScript, o Codrops vai fazer o seu queixo cair com algumas linhas de CSS e muita criatividade.
Icon Hover Effects
artigo | demo | código-fonte
De imagens para ícones e mais uma vez utilizando apenas CSS, este experimento mostra efeitos suaves e fluidos para o mouseover em botões circulares.
Natural Language Form
artigo | demo | código-fonte
Mais um dos meus favoritos, este tutorial mostra um protótipo interessantíssimo para formulários web utilizando o conceito e Natural Language User Interface. No exemplo, os formulários estão “escondidos” no texto e o objetivo final é que tudo fique muito transparente para o usuário.
Simple Drop Down Effects
artigo | demo | código-fonte
Seguindo no campo de formulários (com o perdão do trocadilho) temos um artigo que mostra um plugin jQuery para melhorar o visual e usabilidade de listas drop-down.
Creative Buttons
artigo | demo | código-fonte
E, finalizando, confiram dezenas de efeitos bastante sutis e inspiradores para botões e ações em interfaces web. A maioria dos efeitos são para mouseover, mas o experimento traz também alguns exemplos para eventos de clique.
Bônus: Blueprints
Em meio aos artigos e tutoriais, o Codrops conta com uma categoria chamada Blueprints que se destina a ser uma coleção de exemplos minimalistas de interfaces e componentes.
Os experimentos nesta categoria incluem menus, grids, sliders e até mesmo um formulário responsive em mútliplas colunas.
Bônus 2: Collective
Outra categoria legal no Codrops é a Collective, uma compilação das últimas novidades no mundo do desenvolvimento web. As listas, lançadas semanalmente, trazem os últimos plugins, tutoriais, fontes, ícones e muito mais.