Desafio 30 dias de CSS

30 dias de CSS é um desafio para melhorar as habilidades com HTML e CSS construindo um mini projeto a cada dia durante 30 dias.

Aceitei o desafio inicialmente proposto pela Milena Carecho

Data de ínicio

📅 Iniciei o desafio no dia 25 de julho de 2020

Regras

• realizar um projeto por dia
• adicionar o código do projeto no GitHub
• compartilhar o seu progresso nas mídias sociais (LinkedIn, Twitter, Facebook…) usando a hashtag #30diasDeCSS
• o projeto deve ser concluído até as 23:59

Referências para os desafios

• Youtube
  • Codingnepal
  • Online Tutorials

Calendário de projetos

dia 01 - Loader Animado (25/07/2020)
dia 02 - 3D Comic Book (26/07/2020)

Desafio dia 01 - Loader Animado

Meu código

O que aprendi

• CSS Animations

Desafio dia 02 - 3D Comic Book

O que usei neste desafio

Código do desafio

• Perspective
• Transform

Desafio dia 03 - Parallax Effect

Código do desafio

O que usei neste desafio

• position
• JS: eventListener

Desafio dia 04 - Sabre de Luz

Código do desafio

O que usei neste desafio

• ::after
• hover

Desafio dia 05 - Reveal Block

Código do desafio

O que usei neste desafio

• ::after
• positon
• keyframes
• animation

Desafio dia 06 - Letras Iluminadas

Código do desafio

O que usei neste desafio

• animation
• nth-child ()

Desafio dia 07 - Pulse Effect

Código do desafio

O que usei neste desafio

• animation
• keyframes

Desafio dia 08 - Checkbox

Código do desafio

O que usei neste desafio

• :after
• transitions
• appearence (resetar o estilo padrão do elemento)

Desafio dia 09 - Botão Hover Animado

Código do desafio

O que usei neste desafio

• :hover
• ::before
• z-index
• transition

Desafio dia 10 - Loading com esferas

Código do desafio

O que usei neste desafio

• var()
• nth-child()
• ::before
• keyframes
• animation
• animation-delay

Desafio dia 11 - Texto com mudança de cor

Código do desafio

O que usei neste desafio

• animation
• keyframes
• position

Desafio dia 12 - Input do Google

Código do desafio

O que usei neste desafio

• var
• transition
• position
• :not, :focus

Desafio dia 13 - Menu Icon

Código do desafio

O que usei neste desafio

• transform

Desafio dia 14 - Scroll Down Mouse

Código do desafio

O que usei neste desafio

• var
• keyframes
• animation

Desafio dia 15 - Circular Menu

Código do desafio

Desafio dia 16 - Intro Animada

Código do desafio

Desafio dia 17 - Searchbox

Código do desafio

O que usei neste desafio

• var
• transition
• ::before
• position

Desafio dia 18 - Texto Esfumaçado

Código do desafio

O que usei neste desafio

• filter
• transform
• nth-child

Desafio dia 19 - Image Trail

Código do desafio

Desafio dia 20 - Apple Watch Breath

Código do desafio

O que usei neste desafio

• keyframes
• position
• nth-child()
• mix-blend-mode
• transform
• positon

Desafio dia 21 - Card Hover

código do desafio

O que usei neste desafio

• :hover
• transition

Desafio dia 22 - Animated Background

código do desafio

O que usei neste desafio

• position
• animation
• keyframes
• nth-child()

Desafio dia 23 - 404

código do desafio

O que usei neste desafio

• keyframes
• animation

Desafio dia 24 - Texto em 3d

código do desafio

O que usei neste desafio

• box-shadow

Desafio dia 25 - Loader

código do desafio

O que usei neste desafio

• keyframes
• nth-child
• animation

Desafio dia 26 - Glitch Text

código do desafio

O que usei neste desafio

• animation
• transform
• data-text (HTML)

Desafio dia 27 - Fundo que troca de cor

código do desafio

O que usei neste desafio

• animation

Desafio dia 28 - Switch Background

código do desafio

Desafio dia 29 - Loading Text

código do desafio

Desafio dia 30 - Cake

[código do desafio][dia30]

" class="reference-link">✍🏽 Autores

Feito com ❤️ por Leonardo Carvalho

GitHub - @leon-carvalho

LinkedIn - leonardo-dev

" class="reference-link">📝 Licença

Este projeto esta sobe a licença MIT. Veja a LICENÇA para saber mais.