30diasDeCSS

🚀 30diasDeCSS 🚀

Fala Devs, beleza? 🖖

30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3

Objetivo

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

Se você chegou agora e quer começar o desafio, fique a vontade, o desafio não tem data de inicio fixa, cada um faz os seus 30 dias, eu ficarei honrada com sua participação 😉

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

Eu criei algumas regras para mim que não quero impor a ninguém, mas 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 @MilenaCarecho receberão R$5 via PicPay (total de R$25). Adicionando um pouco de motivação para mim! 😉 (Antes de solicitar qualquer coisa, verifique primeiro a hora no meu fuso horário - para mim, o fuso horário é Brasília - DF (GMT-3)) 💸
• Vou criar um artigo tutorial no medium para todos os projetos

Gostou da ideia? Clique aqui para participar

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode

• 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 - Pendulo de Newton
• Dia 10 - Animação texto alternando
• Dia 11 - Botão com efeito hover
• Dia 12 - Efeito 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 de 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 <a name="id01"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• Criar as camadas utilizando a tag <span>
• tranformação 2D ou 3D de um elemento aqui
• Transições CSS
• Opacidade / transparência do CSS
• hover
• nth-child ()

Desafio dia 02 - Loader animado <a name="id02"></a>

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• animations

Desafio dia 03 - Mudança de cor de texto quando entra em outra div <a name="id03"></a>

<img src="Desafios/dia 03/gif/dia03.gif">

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

Dicas

• CSS Overflow
• Use animations

Desafio dia 04 - Botão com efeito <a name="id04"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• :hover
• ::before
• ::after
• Transições
• transformação

Desafio dia 05 - Efeito pulsar <a name="id05"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• animations
• transformação

Desafio dia 06 - Efeito lightning text <a name="id06"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• animations
• nth-child ()

Desafio dia 07 - Preloader animado <a name="id07"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• animations
• nth-child ()

Desafio dia 08 - Coração batendo <a name="id08"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• ::before
• ::after
• animations

Desafio dia 09 - Pendulo de Newton <a name="id09"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• ::before
• ::after
• first-child
• last-child
• animations

Desafio dia 10 - Animação texto alternando <a name="id10"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• ::before
• animations

Desafio dia 11 - Botão com efeito hover <a name="id11"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• :hover
• ::before
• Overflow
• Transições
• z-index

Desafio dia 12 - Efeito de preenchimento ao passar o mouse<a name="id12"></a>

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

• :hover
• *[::before](https://www.w3