O CSS3 oferece aos designers muitas novas propriedades e módulos (como os módulos CSS Animations e CSS Transitions ) que permitem adicionar interatividade fascinante ao seu trabalho. Se você quiser aproveitar esses recursos modernos de CSS, uma maneira rápida de fazer isso seria usar (ou estudar) bibliotecas de efeitos CSS. Deixe-me falar sobre algumas coleções de CSS de código aberto que ajudarão você a criar ótimas interfaces de transição .
1. Animate.css
Animate.css é uma coleção de mais de 60 efeitos CSS de Daniel Eden, designer do Dropbox. O trabalho de Daniel Eden no Animate.css é uma inspiração para algumas das outras bibliotecas de efeitos CSS abaixo.
- Licença: MIT
- Demonstração
- Documentos
- Baixe no GitHub
2. Hover.css
Esta é uma enorme coleção de 48 efeitos de foco CSS3 do desenvolvedor front-end, Ian Lunn. O legal do Hover.css é que ele vem com uma versão SASS, que é muito, muito útil para muitos de nós.
- Licença: MIT
- Demonstração
- Documentos (tutorial)
- Baixe no GitHub
3. entrada chique
O fancyInput lida especificamente com interações relacionadas ao seu HTML <input>e <textarea>elementos. Ele oferece a capacidade de implementar efeitos CSS interessantes quando os usuários digitam em seus campos de formulário.
- Licença: Desconhecida
- Demonstração
- Documentos
- Baixe no GitHub
4. magia
( Nota: O link acima vai para um site em italiano.) magic é uma coleção interessante de efeitos CSS3. O projeto mágico é inspirado no trabalho de Daniel Eden no Animate.css e é de um desenvolvedor italiano que atende pelo apelido de miniMAC. Com a magia, você pode facilmente acionar animações e transições CSS usando jQuery (ou sua estrutura de desenvolvimento web front-end JavaScript preferida) simplesmente definindo ouvintes de eventos em seus objetos HTML de destino e adicionando/removendo as classes de animação CSS específicas de magia quando o evento ocorre.
Por exemplo, digamos que temos um botão chamado #submit-buttone queríamos removê-lo do DOM – que é um padrão de design para interações críticas em que você não deseja que os usuários continuem clicando em um botão que deve ser pressionado apenas uma vez – mas queria fazer isso de uma maneira impressionante e transitória para garantir que o usuário não ficasse confuso e ficasse imaginando onde o botão foi, tudo o que precisaríamos fazer é isso (usando jQuery):
$(‘#submit-button’).click(function(){ $(this).addClass(‘magictime desapareceOut’) });
- Licença: Desconhecida
- Demo [Tem áudio de fundo em loop]
- Documentos
- Baixe no GitHub
5. Effectt.css
Effeckt.css é uma biblioteca Mobile First de animação e efeitos CSS de transição. Os efeitos incluídos são contribuídos e selecionados por designers para garantir que sejam de bom gosto. O Effeckt.css enfatiza fortemente o desempenho, sendo um dos critérios se ele não rodar bem a 60fps em dispositivos móveis, está fora.
Leia os 9 objetivos do Effeckt.css e assista ao vídeo de 22 segundos do projeto no YouTube para ter uma ideia do futuro do Effeckt.css.
- Licença: MIT
- Demonstração
- Baixe no GitHub
Esta não é uma lista exaustiva de bibliotecas de efeitos CSS. Tenho certeza de que perdi alguns projetos igualmente ótimos por aí.
