O melhor do Codrops

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

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.

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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *