🚀 30diasDeCSS 🚀

Hi Devs, beleza? 🖖

Objetivo

30 dias de CSS3 é um desafio que aceitei (e você também pode participar) e estou inicinando hoje 28 de Julho de 2020, que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de mini projetos.

Regras gerais

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

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode

Você pode mandar suas duvidas anonimamente por AQUI

• 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 Animado
• Dia 05 - Botão Efeito Pulse
• 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

---

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

Meu codigo

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

Meu código

Post LinkedIn

O que eu aprendi

• animations

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

Meu código

Post LinkedIn

O que eu aprendi

• overflow
• positions
• animations

Desafio dia 04 - Botão Animado

Meu código

Post LinkedIn

O que eu aprendi

• inline-block
• svg
• svg rectangle

Desafio dia 05 - Botão Efeito Pulse

Meu código

Post LinkedIn

O que eu aprendi

• variables
• animations
• rgba colors

Desafio dia 06 - Efeito Lightning Text

Meu código

Post LinkedIn

O que eu aprendi

• animation-delay
• nth-child
• flex-direction

Desafio dia 07 - Preloader Animado

Meu código

Post LinkedIn

O que eu aprendi

• display grid
• pseudo elements
• ::after

Desafio dia 08 - Coração batendo

Meu código

Post LinkedIn

O que eu aprendi

• ::before
• ::after
• animations
• filter

Desafio dia 09 - Pendulo de Newton

Meu código

Post LinkedIn

O que eu aprendi

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

Desafio dia 10 - Animação com Texto Alternando

Meu código

Post LinkedIn

O que eu aprendi

• inline-block
• overflow
• float
• animations