Welcome
👋
- #30diasDeCSS
Sobre • Objetivo • Regras Gerais • Projeto Desafio • Referências • Desafios
📝
Sobre
30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3
🚀
Objetivo
30 dias de CSS3 é um desafio que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de pequenos projetos. A ideia é todo dia aplicar o conhecimento no qual venho adqirindo através de cursos voltados para o desenvolvimento Front-end. Ao fim desses 30 dias desejo aprender novas aplicações e abordagens diversas no HTML5 e CSS3.
⚠
Regras Gerais
- Realizar um projeto por dia
- Compartilhar o progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS
- O projeto deve ser concluído até 23:59h
🗂
Projeto Desafio
Gostou da ideia? Clique aqui para conhecer esse projeto de desafios criado pela @milenacarecho
📹
Referências
Youtube Referências dos desafios
Online Tutorials - Creative Creations - DarkCode
🎯
Desafios
- Dia 01 - Ícone de mídia social em camadas
- Dia 02 - Loader animado
- Dia 03 - Mudar a cor do texto
- Dia 04 - Efeito em botão
- Dia 05 - Efeito pulsar
- Dia 06 - Efeito Lightning Text
- Dia 07 - Pre Loader com animação
- Dia 08 - Coração com animação
- Dia 09 - Pêndulo de Newton
- Dia 10 - Texto de digitação animado
- Dia 11 - Botão com efeito hover
- Dia 12 - Texto com efeito mouseover
- Dia 13 - Loading com efeito
- Dia 14 - Texto animado com efeito no Background
- Dia 15 - Texto com efeito flutuante
- Dia 16 - Botão com efeito
- Dia 17 - Loaer animado
- Dia 18 - Texto com efeito fumaça
- Dia 19 - Efeito fundo partículas
- Dia 20 - Botão com Efeito Gradiente
- Dia 21 - Efeito com bolinhas
- Dia 22 - Icone com efeito
- Dia 23 - Botão com efeito neon
- Dia 24 - Preoloader com animação v2
Desafio dia 01 - Ícone de mídia social em camadas
O que eu aprendi
- Criar as camadas utilizando a tag
- Uso de um Bootstrap aqui
- Tranformação 2D ou 3D de um elemento aqui
- Transições CSS
- Opacidade / transparência do CSS
- hover
- nth-child ()
Desafio dia 02 - Loader animado
O que eu aprendi
- Animação @keyframes
- Aplicação do :before
- Movimentação de objetos através do TOP e LEFT em conjunto com o position
Desafio dia 03 - Mudar a cor do texto
O que eu aprendi
- Animação @keyframes
- Uso do white-space
Desafio dia 04 - Efeito em botão
O que eu aprendi
Desafio dia 05 - Efeito pulsar
O que eu aprendi
- Animação @keyframes
- Transformação
Desafio dia 06 - Efeito Lightning Text
O que eu aprendi
- Animação @keyframes
- nth-child ()
Desafio dia 07 - Loader com animação
O que eu aprendi
- Animação @keyframes
- nth-child ()
Desafio dia 08 - Coração com animação
O que eu aprendi
- Animação @keyframes
- ::before
- ::after
Desafio dia 09 - Pêndulo de Newton
O que eu aprendi
Desafio dia 10 - Texto de digitação animado
O que eu aprendi
- ::after
- first-child
- last-child
- Animação @keyframes
Desafio dia 11 - Botão com efeito Hover
O que eu aprendi
Desafio dia 12 - Texto com efeito mouseover
O que eu aprendi
Desafio dia 13 - Loading com efeito
O que eu aprendi
- data-attributes
- ::before
- Animação @keyframes
Desafio dia 14 - Texto animado com efeito no Background
O que eu aprendi
Desafio dia 15 - Texto com efeito flutuando
O que eu aprendi
- ::before
- Animação @keyframes
Desafio dia 16 - Botão com efeito
O que eu aprendi
Desafio dia 17 - Loader animado
O que eu aprendi
Desafio dia 18 - Texto com efeito fumaça
O que eu aprendi
Desafio dia 19 - Efeito fundo partículas
O que eu aprendi
Desafio dia 20 - Botão com efeito gradiente
O que eu aprendi
- :hover
- ::before
- Animação @keyframes
Desafio dia 21 - Efeito com bolinhas
O que eu aprendi
Desafio dia 22 - Ícones com efeitos
O que eu aprendi
Desafio dia 23 - Botão com efeito neon
O que eu aprendi
- -webkit-box-reflect
- nth-child ()
- Animação @keyframes
Desafio dia 24 - Preloader com animação v2
O que eu aprendi
- nth-child ()
- Animação @keyframes
