Faaaaaala galeeeera, esses dias estava meio apagado no blog devido alguns problemas de saúde, mas graças a Deus está tudo bem e bola para frente ;)
Semana passada comecei a desenvolver várias animações no meu codepen utilizando apenas CSS3 e acabei recebendo vários feedbacks positivos e pedidos de tutoriais ensinando a criar alguns destes exemplos. Então tive a idéia de criar mais uma série para nosso blog (já estou devendo a de desenvolvimento de games, mas calma que essa daí está saindo rsrsrs), cujo o nome será:
Animações avançadas com CSS3
- Mas por que "Animações avançadas com CSS3"?
Acho que a melhor forma de explicar o porque escolhi este título é mostrando alguns exemplos que iremos encontrar e desenvolvê-los ao longo da série, tais como:
Round, rouuund!!!
O **Round, rouuund ** foi a primeira animação que postei na comunidade. Recebi vários comentários e opniões interessantes, que me encorajaram bastante à continuar com a diversão. Observe o código CSS e note que sempre replicamos os circulos e utilizamos apenas uma animação para todos os elementos duplicados, o segredo está apenas na propriedade animation-delay
Ah, vale apena lembrar que não iremos utilizar pré-processadores, pois a idéia no futuro é integrar essas animações com pré-processadores para que possamos notar a diferença do uso de um pré-processador nos nossos projetos.
Pure CSS3 Loader
Tente ficar 60 segundos olhando para o centro deste loader, rsrsrsrs... Neste exemplo utilizamos bastante as propriedades de border-width, width e border-radius.
Rect
O esquema do Rect é bastante parecido com o do Round, rouuund pois também utilizamos a técnica de replicação de elementos e o segredo da propriedade animation-delay
Bluup
O Bluup foi uma das animações que eu mais gostei, pois ele meio que parece uma gota de água caindo numa poça ou sei lá rsrsrsrsr... Realmente foi uma viagem minha que no final das contas, achei que ficou legal :)
Webschool
No final dos exemplos que estava desenvolvendo, tive a honra de receber um pedido do meu amigo Jean Carlo Nascimento (Suissa) para desenvolver a logo da sua empresa, a Webschool, utilizando apenas CSS3... Segue o resultado abaixo :)
Esses são apenas 4 exemplos, dos vários que iremos desenvolver ao longo do tempo. Nos dias em que estava doente, desenvolvi 8 exemplos mas preparem-se, pois se vocês pretendem acompanhar a série até o final, vou logo avisando que não tenho previsão de términio para ela nem tãaaao cedo rsrsrssrs...
Afinal todos os dias nos deparamos com situações diferentes e idéias de novas animações "Show Man" :)
Bem pessoal, essa foi apenas uma introdução da nova série que está por vim \o/ Espero que gostem e até a proooxima :)