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
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
Desafio dia 02 - 3D Comic Book
O que usei neste desafio
Código do desafio
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
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
Desafio dia 07 - Pulse Effect
Código do desafio
O que usei neste desafio
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
Desafio dia 14 - Scroll Down Mouse
Código do desafio
O que usei neste desafio
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
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
Desafio dia 24 - Texto em 3d
código do desafio
O que usei neste desafio
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
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]
✍🏽 Autores
Feito com ❤️ por Leonardo Carvalho
GitHub - @leon-carvalho
LinkedIn - leonardo-dev
📝 Licença
Este projeto esta sobe a licença MIT. Veja a LICENÇA para saber mais.