/30DiasDeCSS

Desafio aceito para criar 30 mini projetos utilizando HTML e CSS em 30 dias

Primary LanguageCSSMIT LicenseMIT

🚀 30DiasDeCSS 🚀

Desafio aceito para criar 30 mini projetos utilizando HTML e CSS em 30 dias para desenvolver minhas habilidades nessas tecnologias.


📜 Regras gerais

  • Realizar 30 mini projetos;
  • Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS;
  • O projeto deve ser concluído até 23:59.

Gostou da ideia ❤️? Clique aqui e participe também!


🔍 Sumário


1º Dia - Botões em camadas

App Demo

Código
Postagem LinkeIn
Postagem Twitter

Propriedades aprendidas:

  • Criar camadas utilizando span
  • Aplicar ::nth-child()
  • Aplicar box-shadow
  • Aplicar transform e opacity

2º Dia - Loader animado

App Demo

Código
Postagem LinkedIn
Postagem Twitter

Propriedades aprendidas:

  • Aplicar animation

3º Dia - Mudança da cor de texto ao mudar de div

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

  • Aplicar animation

4º Dia - Efeito hover

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

  • Aplicar ::after e ::before
  • Aplicar :hover::after e :hover::before

5º Dia - Efeito pulsar

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

  • Aplicar animation para criar multiplos shadows

6º Dia - Efeito lightning text

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

  • Utilizar o li para criar a animação
  • Aplicar o li:nth-child() para usar o efeito animation-delay
  • Aplicar text-shadow

7º Dia - Efeito pré loader TikTok

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

  • Aplicar o animation
  • Usar a propriedade mix-blend-mode

8º Dia - Efeito pulsar com coração

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda


9º Dia - Pendulo de Newton

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda


10º Dia - Textos alternados

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

  • Utilizar a propriedade content para mostrar os desenhos;
  • Aplicar o @Keyframes para mudança de contents;

11º Dia - Botão efeito hover animado

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

  • Utilizar a propriedades -webkit-transition e -webkit-transform para dar o efeito animado;
  • Aplicar a propriedade ::after e :focus;

12º Dia - Efeito de preenchimento do texto ao passar o mouse

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda


13º Dia - Loading

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda


14º Dia - Fundo de texto animado

App Demo

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda


15º Dia - Texto Flutuante

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


16º Dia - Botão animado

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


17º Dia - Loading animado

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


18º Dia - Texto esfumaçado

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


19º Dia - Partículas animadas

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


20º Dia - Botão animado

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


21º Dia - Botão estilizado

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


22º Dia - Ícones estilizados

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


23º Dia - Botão efeito hover

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda


24º Dia - Pré-Loader animado

App Demo

Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda