README.md

🚀 30diasDeCSS 🚀

Bom dia/tarde/noite, tudo bom ?

30 dias de CSS3 é um desafio que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de mini projetos diários. Todos os créditos à @MilenaCarecho 😄

Objetivo

30 dias de CSS3 é um desafio que vou aceitar (e você também pode participar) a partir de 20 de Julho de 2020 (estou começando dia 29), que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos

Regras gerais

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

Regras pra mim

Vou aderir as regras tambem hihi, mas vou fazer uma alteração, lembrando que não é obrigação, fique à vontade para fazer o mesmo, se quiser!

• Se eu não concluir o projeto do dia, as 5 primeiras pessoas a apontar no Twitter @Ricardinho_tremetreme eu vou somar R$5 (total de R$25) numa quantia e ao final dos 30 dias irei doar toda essa quantia a uma instituição(a ser definida ainda).Adicionando um pouco de motivação para mim! 💸

Gostou da ideia? Clique aqui para participar

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode

Achei muito divertido ideia, e desafio todos que tenham interesse 🤗

Novamente, todos os créditos à criadora do desafio 👉 @MilenaCarecho 👈

Minhas redes sociais

• Facebook
• LinkedIn
• GitHub
• Twitter

Vou atualizando aqui diariamente, qualquer dúvida estou a disposição

• Dia 01 - Ícone de mídia social em camadas
• Dia 02 - Loader animado
• Dia 03 - Mudança de cor de texto quando entra em outra div
• Dia 04 - Botão com efeito
• Dia 05 - Efeito pulsar
• Dia 06 - Efeito lightning text
• Dia 07 - Preloader animado
• Dia 08 - Coração batendo
• Dia 09 - Pêndulo de Newton
• Dia 10 - Animação texto alternando
• Dia 11 - Botão com efeito hover
• Dia 12 - Efeito de texto de preenchimento ao passar o mouse
• Dia 13 - Loading com efeito
• Dia 14 - Fundo de texto animado
• Dia 15 - Texto flutuante
• Dia 16 - Botão com efeito
• Dia 17 - Loader animado
• Dia 18 - Texto esfumaçado
• Dia 19 - Efeitos de animação fundo de partículas
• Dia 20 - Botão com efeito
• Dia 21 - Esferas quicando
• Dia 22 - Icones com efeito
• Dia 23 - Botão com efeito hover
• Dia 24 - Preloader animado
• Dia 25 - Checkbox animado
• Dia 26 - Loading com efeito
• Dia 27 - Efeito pulsar
• Dia 28 - Cor do background mudando
• Dia 29 - Menu responsivo com Media Queries
• Dia 30 - Fogos de artificio

Desafio dia 01 - Ícone de mídia social em camadas

O que eu aprendi

• Criar as camadas utilizando a tag <span>
• Transições CSS
• Opacidade / transparência do CSS
• hover
• nth-child ()

Desafio dia 02 - Loader animado

O que eu aprendi

• sobrepor elementos utilizando posicionamento absolute
• Animations
• @keyframe usando from to
• clip-path: polygon()

Desafio dia 03 - Mudança de cor de texto quando entra em outra div

O que eu aprendi

• Animations
• HTML video
• @keyframe usando from to
• Overflow
• *CSS Text

Desafio dia 04 - Botão com efeito

O que eu aprendi

• Animations
• hover
• ::before
• ::after
• Transições
• Overflow

Desafio dia 05 - Efeito pulsar

O que eu aprendi

• Animations
• Opacidade / transparência do CSS
• @keyframe
• sobrepor elementos utilizando posicionamento absolute

Desafio dia 06 - Efeito lightning text

O que eu aprendi

• Animations
• Opacidade / transparência do CSS
• @keyframe
• nth-child ()

Desafio dia 07 - Preloader animado

O que eu aprendi

• Animations
• @keyframe
• nth-child ()
• transform
• transform: scale()

Desafio dia 08 - Coração batendo

O que eu aprendi

• Animations
• @keyframe
• transform
• transform: scale()
• Font Awesome

Desafio dia 09 - Pêndulo de Newton

O que eu aprendi

• Animations
• @keyframe
• Display: flex
• justify-content
• transform-origin

Desafio dia 10 - Animação texto alternando

O que eu aprendi

• Animations
• @keyframe
• ::after

Desafio dia 11 - Botão com efeito hover

O que eu aprendi

• cubic-bezier
• hover
• ::before

Desafio dia 12 - Efeito de texto de preenchimento ao passar o mouse

O que eu aprendi

• background-clip
• hover
• ::before

Desafio dia 13 - Loading com efeito

O que eu aprendi

• Animations
• @keyframe
• nth-child ()

Desafio dia 14 - Fundo de texto animado

O que eu aprendi

• Animations
• @keyframe
• background-clip
• text-stroke

Desafio dia 15 - Texto flutuante

O que eu aprendi

• Animations
• @keyframe
• rotate()
• text-shadow

Desafio dia 16 - Botão com efeito

O que eu aprendi

• Animations
• @keyframe
• box-shadow

Desafio dia 17 - Loader animado

O que eu aprendi

• Animations
• rotate()
• @font-face
• @keyframe usando from to

Desafio dia 18 - Texto esfumaçado

O que eu aprendi

• Animations
• blur()

Desafio dia 19 - Efeitos de animação fundo de partículas

O que eu aprendi

• Animations
• @keyframe
• rotate()
• nth-child ()

Desafio dia 20 - Botão com efeito

O que eu aprendi

• box-shadow
• hover
• ::before
• Opacidade / transparência do CSS

Desafio dia 21 - Esferas quicando

O que eu aprendi

• Animations
• @keyframe
• ::after
• ::before

Desafio dia 22 - Icones com efeito

O que eu aprendi

• hover
• nth-child ()
• ::after

Desafio dia 23 - Icones com efeito

O que eu aprendi

• hover
• ::before

Desafio dia 24 - Preloader animado

O que eu aprendi

• nth-child ()
• Animations
• @keyframe

Desafio dia 25 - Checkbox animado

O que eu aprendi

• hover
• Animations
• @keyframe
• label

Desafio dia 26 - Loading com efeito

O que eu aprendi

• nth-child ()
• Animations
• @keyframe

Desafio dia 27 - Efeito pulsar

O que eu aprendi

• Opacidade / transparência do CSS
• Animations
• @keyframe

Desafio dia 28 - Cor do background mudando

O que eu aprendi

• linear-gradient()
• background-position
• Animations
• @keyframe

Desafio dia 29 - Menu responsivo com Media Queries

O que eu aprendi

• linear-gradient()
• background-position
• media querie
• hover
• cubic-bezier

Desafio dia 30 - Fogos de artificio

O que eu aprendi

• Animations
• @keyframe
• ::before