🤓 30 Dias de CSS 🤓

Beleza Devs? 🖖

30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo projetinhos diários utilizando HTML5 e CSS3.

Objetivo

30 dias de CSS3 é um desafio que vou aceitar iniciado por Milena Carecho (e você também pode participar) que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos.

Entre em contato

• Linkedin
• E-mail

Início

O desafio foi iniciado por mim no dia 01 de agosto e será feito um projetinho por dia até o dia 30 de agosto de 2020.

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

Desafios

• Dia 01 - Imagem em camadas
• Dia 02 - Loader animado
• Dia 03 - Mudança de cor de texto entre divs
• Dia 04 - Botão com efeito
• Dia 05 - Efeito pulsar
• Dia 06 - Efeito lightning em textos
• Dia 07 - Preloader animado
• Dia 08 - Coração pulsando
• Dia 09 - Pendulo de Newton
• Dia 10 - Animação de texto alternando
• Dia 11 - Botão com efeito hover
• Dia 12 - Efeito de texto de preenchimento
• Dia 13 - Loading com efeito
• Dia 14 - Fundo de texto animado
• Dia 15 - Texto flutuante
• Dia 16 - Botão com efeito
• Dia 17 - Loading animado
• Dia 18 - Texto fumaç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
• 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 - Imagem em camadas

Meu codigo

O que foi aplicado

• Criar as camadas
• tranformação de um elemento
• Transições CSS
• Opacidade / transparência do CSS
• hover
• nth-child ()

Desafio dia 02 - Loader animado

Meu código

O que foi aplicado

• animations

Desafio dia 03 - Mudança de cor de texto entre divs

Meu código

O que foi aplicado

• CSS Overflow
• animations

Desafio dia 04 - Botão com efeito

Meu código

O que foi aplicado

• Transitions
• transforms
• hover
• ::before and ::after

Desafio dia 05 - Efeito pulsar

Meu código

O que foi aplicado

• animations
• transforms

Desafio dia 06 - Efeito lightning em textos

Meu código

O que foi aplicado

• animations
• nth-child ()

Desafio dia 07 - Preloader animado

Meu código

O que foi aplicado

• animations
• nth-child ()

Desafio dia 08 - Coração pulsando

Meu código

O que foi aplicado

• animations
• ::before
• ::after

Desafio dia 09 - Pendulo de Newton

Meu código

O que foi aplicado

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

Desafio dia 10 - Animação de texto alternando

Meu código

O que foi aplicado

• animations
• ::before

Desafio dia 11 - Botão com efeito hover

Meu código

O que foi aplicado

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

Desafio dia 12 - Efeito de texto de preenchimento

Meu código

O que foi aplicado

• :hover
• ::before
• Transições

Desafio dia 13 - Loading com efeito

Meu código

O que foi aplicado

• animations
• nth-child ()

Desafio dia 14 - Loading com efeito

Meu código

O que foi aplicado

• animations
• background-clip

Desafio dia 15 - Texto flutuante

Meu código

O que foi aplicado

• animations
• Transformação

Desafio dia 16 - Botão com efeito

Meu código

O que foi aplicado

• Transições
• Transformação
• ::before
• :hover

Desafio dia 17 - Loading animado

Meu código

O que foi aplicado

• animations

Desafio dia 18 - Texto fumaçado

Meu código

O que foi aplicado

• animations
• nth-child ()

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

Meu código

O que foi aplicado

• animations
• Transformação
• nth-child ()

Desafio dia 20 - Botão com efeito

Meu código

O que foi aplicado

• Transições
• Transformação
• ::before
• :hover

Desafio dia 21 - Esferas quicando

Meu código

O que foi aplicado

• animations
• nth-child ()

Desafio dia 22 - Icones com efeito

Meu código

O que foi aplicado

• animations
• :hover
• ::before
• ::after

Desafio dia 23 - Botão com efeito

Meu código

O que foi aplicado

• transformação
• :hover

Desafio dia 24 - Preloader animado

Meu código

O que foi aplicado

• nth-child ()
• animations

Desafio dia 25 - checkbox animado

Meu código

O que foi aplicado

• ::before
• animations

Desafio dia 26 - Loading com efeito

Meu código

O que foi aplicado

• ::before
• ::after
• animations

Desafio dia 27 - Efeito pulsar

Meu código

O que foi aplicado

• ::before
• ::after
• animations

Desafio dia 28 - cor do background mudando

Meu código

O que foi aplicado

• animations

Desafio dia 29 - Menu responsivo com Media Queries

Meu código

O que foi aplicado

• Media Queries

Desafio dia 30 - Fogos de artificio

Meu código

O que foi aplicado

• ::before
• ::after
• animations
• nth-child ()

Gostou da ideia?

Clique aqui para participar

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode