🤓 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
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
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
Desafio dia 03 - Mudança de cor de texto entre divs
Meu código
O que foi aplicado
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
Desafio dia 06 - Efeito lightning em textos
Meu código
O que foi aplicado
Desafio dia 07 - Preloader animado
Meu código
O que foi aplicado
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
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
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
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
Desafio dia 18 - Texto fumaçado
Meu código
O que foi aplicado
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
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
Desafio dia 24 - Preloader animado
Meu código
O que foi aplicado
Desafio dia 25 - checkbox animado
Meu código
O que foi aplicado
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
Desafio dia 29 - Menu responsivo com Media Queries
Meu código
O que foi aplicado
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