Esse é um desafio para treinar habilidades de estilização explorando os recursos do HTML5 e CSS3. Estou começando a minha versão no dia 9 de Setembro de 2020. Para saber mais sobre o desafio, acesse: 30 dias de CSS.
- Realizar um projeto por dia.
- Compartilhe seu progresso nas redes sociais (Linkedin, Instagram, Twitter, etc.) usando a hashtag #30diasDeCSS.
- O projeto deve ser concluído até 23:59.
Você pode ver uma prévia no navegador clicando aqui.
- Dia 01 | Texto animado em onda
- Dia 02 | Efeito de desenho em SVG
- Dia 03 | Botão com líquido
- Dia 04 | Dado de 20 lados
- Dia 05 | Redes sociais
- Dia 06 | Ícones animados
- Dia 07 | Hora do duelo
- Dia 08 | Ícones em camadas
- Dia 09 | Confete
- Dia 10 | Modo escuro
- Dia 11 | Lista de cards
- Dia 12 | Troca de texto
- @keyframes
- animation
- -webkit-box-reflext
- Variáveis do CSS3
- @keyframes
- animation
- stroke-dasharray
- stroke-offset
- @keyframes
- animation
- overflow
- ::before
- ::after
Usei como referência e fonte dos números super específicos esse CodePen
- @keyframes
- animation
- transform-style
- clip-path
- transform: rotate, translate e perspective
Vi no desafio "90 Sites em 90 Dias" do Dorly Neto.
- transition
- display flex
- nth-child
- overflow
- ::before
- ::after
- animation
- transform
- perspective
- transform-style
- transition
- transform: translate rotate skew
- animation
- transform
- transition
- :before
- :after
- :checked
- transition
- :not
- :first-child
- display: flex
- animation
- overflow