🚀 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
• 2º Dia - Loader animado
• 3º Dia - Mudança da cor de texto ao mudar de div
• 4º Dia - Efeito hover
• 5º Dia - Efeito pulsar
• 6º Dia - Efeito lightning text
• 7º Dia - Efeito pré loader TikTok
• 8º Dia - Efeito pulsar com coração
• 9º Dia - Pendulo de Newton
• 10º Dia - Textos alternados
• 11º Dia - Botão efeito hover animado
• 12º Dia - Efeito de preenchimento do texto ao passar o mouse
• 13º Dia - Loading
• 14º Dia - Fundo de texto animado
• 15º Dia - Texto Flutuante
• 16º Dia - Botao animado
• 17º Dia - Loading animado
• 18º Dia - Texto esfumaçado
• 19º Dia - Partículas animadas
• 20º Dia - Botão animado
• 21º Dia - Loading estilizado
• 22º Dia - Ícones estilizados
• 23º Dia - Botão efeito hover
• 24º Dia - Pré-Loader animado

---

1º Dia - Botões em camadas

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

Código
Postagem LinkedIn
Postagem Twitter

Propriedades aprendidas:

• Aplicar animation

---

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

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

Propriedades aprendidas:

• Aplicar animation

---

4º Dia - Efeito hover

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

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

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

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

---

9º Dia - Pendulo de Newton

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

---

10º Dia - Textos alternados

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

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

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

---

13º Dia - Loading

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

---

14º Dia - Fundo de texto animado

Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda

---

15º Dia - Texto Flutuante

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

---

16º Dia - Botão animado

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

---

17º Dia - Loading animado

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

---

18º Dia - Texto esfumaçado

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

---

19º Dia - Partículas animadas

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

---

20º Dia - Botão animado

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

---

21º Dia - Botão estilizado

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

---

22º Dia - Ícones estilizados

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

---

23º Dia - Botão efeito hover

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

---

24º Dia - Pré-Loader animado

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

---