Uma das desenvolvedoras incríveis que conheci recentemente é Sara Soueidan. Seus tutoriais sobre SVG são de primeira classe e ela me ensinou muito sobre a excelência que é o SVG. Como ela é uma das minhas heroínas do SVG, achei que seria incrível pedir que ela escolhesse algumas de suas demonstrações favoritas do CodePen. Aproveite!
Há alguns meses, Chris Coyier compartilhou suas demonstrações favoritas do CodePen aqui mesmo no blog do David. Há algum tempo, David pediu que eu compartilhasse algumas das minhas canetas favoritas também, portanto, aqui estão algumas das demonstrações que me surpreenderam nos últimos meses.
O principal aspecto que o senhor notará em minhas canetas favoritas é que a maioria delas é feita com SVG. Os incríveis recursos de animação do SVG, combinados com algumas bibliotecas de animação realmente excelentes, podem produzir alguns efeitos impressionantes, como o senhor verá.
Os senhores sempre encontrarão canetas incríveis em Página de perfil de Lucas Bebber. Seus trabalhos são excelentes! Portanto, aqui estão algumas de suas canetas que entraram na minha lista de favoritas:
1. CSS Raindrops
Eu vi uma vez um efeito de “imagem através de vidro molhado” criado usando HTML5 Canvas e muito JavaScript, mas criar esse efeito usando apenas o bom e velho CSS é outra coisa; e o Lucas fez exatamente isso! A caneta também vem com opções que permitem que o senhor mude o foco para as gotas de chuva, a imagem de fundo ou ambos.
Veja a caneta CSS Raindrops on a Window (Gotas de chuva em uma janela) por Lucas Bebber (@lbebber) em CodePen.
2. “The Goo Effect” (O efeito Goo)
Acho que a maioria dos senhores já viu ou talvez tenha ouvido falar desse efeito recentemente. O efeito goo é provavelmente o efeito mais criativo criado com filtros SVG que já encontrei.
Veja a caneta CSS Gooey Menu (Versão 1) por Lucas Bebber (@lbebber) em CodePen.
Lucas escreveu mais sobre esse efeito no CSS-Tricks e compartilhou muitos outros casos de uso e exemplos na Codrops. Recomendo totalmente que o senhor confira os artigos se quiser saber como o efeito é criado.
3. Desfoque de movimento
Filtros SVG FTW. Mais uma vez, Lucas usa os efeitos de filtro embutidos no SVG para criar um efeito que pode levar nossas UIs para o próximo nível.
Veja a caneta Experimento de desfoque de movimento por Lucas Bebber (@lbebber) em CodePen.
4. Squiggly Text
O senhor sabia que o SVG oferece um filtro de turbulência? Eu não sabia, até ver essa caneta de código do Lucas. Minha parte favorita é que o texto é totalmente editável e que até mesmo o cursor piscante vai se contorcer conforme o senhor edita o texto.
Veja a caneta Experimento com texto rabiscado por Lucas Bebber (@lbebber) em CodePen.
O senhor pode encontrar muitos outros experimentos de Lucas em seu perfil no Codepen.
5. Corte curvo da UI
Recentemente, dei ao uma palestra sobre como todos deveriam usar mais o SVG para criar interfaces de usuário melhores, portanto, qualquer coisa que aproveite a flexibilidade do SVG para fazer isso ganha meu coração. HORNEBOM criou esse exemplo simples, mas bonito, mostrando como os caminhos do SVG podem ser usados para se libertar das limitações retangulares do modelo de caixa do CSS e criar interfaces de usuário mais flexíveis e “dobráveis”. O toque adicional de alterar a curva da linha à medida que o usuário rola para baixo é lindo.
Veja a caneta Corte Curvo por Hornebom (@Hornebom) em CodePen.
6. “Motion For The Web” (Movimento para a Web)
O que acontece quando o senhor combina animações incrivelmente suaves (SVG de novo!) com movimentos sutis e música correspondente? O resultado é essa beleza:
Veja a caneta -● MOTION para a Web ●- por LegoMushroom (@sol0mka) em CodePen.
Minha parte favorita dessa caneta são os controles que permitem controlar a velocidade da animação para que o usuário possa diminuí-la e analisá-la à medida que avança. Belo trabalho do LegoMushroom.
7. Conceito de destruição de janelas modais
O LegoMushroom faz um excelente trabalho usando diferentes bibliotecas de animação para criar efeitos de animação realmente atraentes, como o que vimos na demonstração anterior. Nesta demonstração, o senhor pode destruir (literalmente) a janela modal fechando-a. O efeito sonoro torna a “quebra” ainda mais divertida!
Veja a caneta Conceito de destruição de janela modal por LegoMushroom (@sol0mka) em CodePen.
8. Carregando o ícone usando CSS clip-path
Adoro essa caneta de código, principalmente porque ela usa uma das minhas propriedades CSS favoritas e de uma forma muito criativa. A clip-path nos permite recortar elementos em formas poligonais específicas usando a propriedade polygon() e essa função pode ser animada usando animações e transições CSS. Bennett Feely fez exatamente isso nesta demonstração e, ao alterar a cor do plano de fundo do elemento à medida que o caminho de recorte é animado, obtemos uma animação de carregamento muito boa.
Veja a caneta Carregando o ícone por Bennett Feely (@bennettfeely) em CodePen.
Se estiver interessado em saber mais sobre essa propriedade, o senhor pode conferir este artigo no meu blog.
9. “When You’re An Introvert” (Quando o senhor é introvertido)
Sarah Drasner sabe o que é ser introvertido e, como sou introvertido, essa caneta tocou meu coração. Não apenas a moral por trás dela significa muito para mim, mas também é um SVG animado! Duas vitórias!
Veja a caneta Quando o senhor é introvertido… por Sarah Drasner (@sdras) em CodePen.
10. Modos de mistura de GIF + CSS
Combine um GIF animado com modos de mesclagem CSS e o senhor obterá esse belo efeito de Yoksel.
Veja a caneta LErrRX por yoksel (@yoksel) em CodePen.
A animação é incrivelmente suave e a introdução dos modos de mescla do CSS a transforma em um belo efeito que mostra que as possibilidades do que pode ser feito com os novos recursos do CSS são incontáveis.
Se estiver interessado em modos de mesclagem CSS, leia tudo sobre eles aqui.
Palavras finais
As canetas acima são algumas das minhas favoritas, mas há muito mais do que eu poderia listar aqui que eu absolutamente amo também. O senhor pode conferir algumas das minhas canetas favoritas na guia “Loved” (Amadas) em meu perfil na Codepen.
Espero que essas demonstrações tenham sido inspiradoras o suficiente para que o senhor experimente mais e compartilhe seu próprio trabalho criativo no Codepen também.
