Desafio aceito para criar 30 mini projetos utilizando HTML e CSS em 30 dias para desenvolver minhas habilidades nessas tecnologias.
- 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!
- 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
Código
Postagem LinkeIn
Postagem Twitter
- Criar camadas utilizando
span - Aplicar
::nth-child() - Aplicar
box-shadow - Aplicar
transformeopacity
Código
Postagem LinkedIn
Postagem Twitter
- Aplicar
animation
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
- Aplicar
animation
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
- Aplicar
::aftere::before - Aplicar
:hover::aftere:hover::before
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
- Aplicar
animationpara criar multiplos shadows
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
- Utilizar o
lipara criar a animação - Aplicar o
li:nth-child()para usar o efeitoanimation-delay - Aplicar
text-shadow
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
- Aplicar o
animation - Usar a propriedade
mix-blend-mode
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
- Utilizar a propriedade
contentpara mostrar os desenhos; - Aplicar o @Keyframes para mudança de contents;
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
- Utilizar a propriedades
-webkit-transitione-webkit-transformpara dar o efeito animado; - Aplicar a propriedade
::aftere:focus;
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedIn
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda
Código
Postagem LinkedInSem Postagem ainda
Postagem Twitter Sem postagem ainda