Efeitos e Animações Usando Apenas Html, Css e JavaScript

Olá! Desde quando peguei gosto em aprender um pouquinho mais sobre HTML, tenho visto muita coisa interessante pela internet, que eu nem sequer pensava ser possível, como por exemplo, criar 'imagens', digamos assim, sem usar imagem alguma de fato, ou animações totalmente em HTML e CSS, junto a scripts em alguns casos, textos com efeitos legais, entre outras coisas, que, todo mundo pode fazer, alguns, nem é preciso ser expert para tentar e dar certo! Separei algumas animações e efeitos que achei fofo; todos são daquele site que recomendei para vocês no post 5 Ferramentas Online Úteis para Blogueiros, e que cada dia gosto mais, o Codepen. Para ver o HTML, Css e script utilizados, clique em suas respectivas abas. Bora ver!
1. Text Transform: o texto muda todo ao passar o mouse :3

2. Uma animação para Halloween (Boooo)
See the Pen Happy Halloween by Allan Jay Tomol (@atomistheman) on CodePen.

3.Nesse você digita alguma coisa, letra ou símbolo em 'type', que vai aparecer no lugar dos asteriscos:
See the Pen hcdot by Nate Wiley (@natewiley) on CodePen.

4.Efeito hover legal:
See the Pen Bootstrap Row hover animation by Hervé (@hmdmweb) on CodePen.

5.Botões coloridos: não dariam um menu bonitinho?
See the Pen cutesy by Charbs (@cayoub88) on CodePen.

6.Diz pra mim que isso não é tipo um Rilakkuma rosa :3
See the Pen A cute widdle bear in CSS :D by Sam Seay (@samueljseay) on CodePen.

7.Sol!!!
See the Pen CSS3 sun by mzhou (@zmmbreeze) on CodePen.

8. Acho que esse é aquele bichinho, o Kyubey, de um anime que não me lembro...Madoka Magica?
See the Pen Pure CSS Animal by Luke Shimkus (@KingShimkus) on CodePen.

9. Booo de novo! Agora vocês ficaram assustados neh! :D~só que não...
See the Pen ghost by Helen (@helenvholmes) on CodePen.

10. Bordas serrilhadas com CSS? :O
See the Pen Pinked Border by Joey Hoer (@joeyhoer) on CodePen.

11.Menu Tabs
See the Pen Pink Menu Tabs by Aleks (@achudars) on CodePen.

Eu, como disse, adorei! Pensa quanta criatividade!!! Espero um dia fazer coisas assim, e claro, compartilhar com vocês, caso consiga. Para usar vocês terão que adaptar os códigos de acordo com a necessidade ou onde forem aplicar.
Para testar ou visitar os autores é só clicar no logo do Codepen (Edit on Codepen), em cada demonstração, mas se preferir, os links de todos eles:
Animated Hover Effect using CSS3 Transforms by Braad Martin (@BraadMartin) Happy Halloween by Allan Jay Tomol (@atomistheman) hcdot by Nate Wiley (@natewiley) Bootstrap Row hover animation by Hervé (@hmdmweb) cutesy by Charbs (@cayoub88) A cute widdle bear in CSS :D by Sam Seay (@samueljseay) CSS3 sun by mzhou (@zmmbreeze) Pure CSS Animal by Luke Shimkus (@KingShimkus) ghost by Helen (@helenvholmes) Pinked Border by Joey Hoer (@joeyhoer) Pink Menu Tabs by Aleks (@achudars) .
Imagem de abertura do post: Pixabay

Beijo






Postar um comentário

6 Comentários

  1. Roberta, ensina pra gente como vc faz essas visualizações e como faz para personalizar do nosso jeito, hehe >.<
    Adorei o post, bem útil mesmo, tenho q te elogiar kkkkk você é muito boa xD

    http://madnesshoujo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada :D Você se refere a alguma específica das citadas ou a caixinha com códigos e resultados?

      Excluir
    2. as caixinhas com codigos e resultados o3o

      http://madnesshoujo.blogspot.com.br/

      Excluir
    3. É o editor padrão do Codepen :3 Depois faço um post sobre como usar ok? Bjus

      Excluir
  2. Roberta como eu faço para colocar anuncios fofos na lateral do meu bloog eu coloco mais ai ele fika amarelo e nao aparece o anuncio me esplica pfv

    ResponderExcluir
    Respostas
    1. Pelo adsense? Talvez este link possa te ajudar: aqui.
      Aí depois tente personalizar o widget/gadget do anúncio com este tutorial.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up