Loading repository data…
ricardozamboni / repository
-30diasDeCSS
30 dias de CSS3 é um desafio que vou aceitar (proposto por @MilenaCarecho), que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de mini projetos
#animation-css#css#css3#html#html5
Live repository statistics
★ 15Stars
⑂ 2Forks
◯ 0Open issues
◉ 15Watchers
README preview
🚀 30diasDeCSS 🚀
Bom dia/tarde/noite, tudo bom ?
30 dias de CSS3 é um desafio que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de mini projetos diários. Todos os créditos à @MilenaCarecho 😄
Objetivo
30 dias de CSS3 é um desafio que vou aceitar (e você também pode participar) a partir de 20 de Julho de 2020 (estou começando dia 29), que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos
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
Regras pra mim
Vou aderir as regras tambem hihi, mas vou fazer uma alteração, lembrando que não é obrigação, fique à vontade para fazer o mesmo, se quiser!
- Se eu não concluir o projeto do dia, as 5 primeiras pessoas a apontar no Twitter @Ricardinho_tremetreme eu vou somar R$5 (total de R$25) numa quantia e ao final dos 30 dias irei doar toda essa quantia a uma instituição(a ser definida ainda).Adicionando um pouco de motivação para mim! 💸
Gostou da ideia? Clique aqui para participar
Youtube Referencias dos desafios
Online Tutorials - Creative Creations - DarkCode
Achei muito divertido ideia, e desafio todos que tenham interesse 🤗
Novamente, todos os créditos à criadora do desafio 👉 @MilenaCarecho 👈
Minhas redes sociais
Vou atualizando aqui diariamente, qualquer dúvida estou a disposição
- Dia 01 - Ícone de mídia social em camadas
- Dia 02 - Loader animado
- Dia 03 - Mudança de cor de texto quando entra em outra div
- Dia 04 - Botão com efeito
- Dia 05 - Efeito pulsar
- Dia 06 - Efeito lightning text
- Dia 07 - Preloader animado
- Dia 08 - Coração batendo
- Dia 09 - Pêndulo de Newton
- Dia 10 - Animação texto alternando
- Dia 11 - Botão com efeito hover
- Dia 12 - Efeito de texto de preenchimento ao passar o mouse
- Dia 13 - Loading com efeito
- Dia 14 - Fundo de texto animado
- Dia 15 - Texto flutuante
- Dia 16 - Botão com efeito
- Dia 17 - Loader animado
- Dia 18 - Texto esfumaçado
- Dia 19 - Efeitos de animação fundo de partículas
- Dia 20 - Botão com efeito
- Dia 21 - Esferas quicando
- Dia 22 - Icones com efeito
- Dia 23 - Botão com efeito hover
- Dia 24 - Preloader animado
- Dia 25 - Checkbox animado
- Dia 26 - Loading com efeito
Desafio dia 01 - Ícone de mídia social em camadas
O que eu aprendi
- Criar as camadas utilizando a tag
<span> - Transições CSS
- Opacidade / transparência do CSS
- hover
- nth-child ()
Desafio dia 02 - Loader animado
O que eu aprendi
- sobrepor elementos utilizando posicionamento absolute
- Animations
- @keyframe usando from to
- clip-path: polygon()
Desafio dia 03 - Mudança de cor de texto quando entra em outra div
O que eu aprendi
Desafio dia 04 - Botão com efeito
O que eu aprendi
Desafio dia 05 - Efeito pulsar
O que eu aprendi
- Animations
- Opacidade / transparência do CSS
- @keyframe
- sobrepor elementos utilizando posicionamento absolute
Desafio dia 06 - Efeito lightning text
O que eu aprendi
Desafio dia 07 - Preloader animado
O que eu aprendi
Desafio dia 08 - Coração batendo
O que eu aprendi
Desafio dia 09 - Pêndulo de Newton
O que eu aprendi
Desafio dia 10 - Animação texto alternando
O que eu aprendi
Desafio dia 11 - Botão com efeito hover
O que eu aprendi
Desafio dia 12 - Efeito de texto de preenchimento ao passar o mouse
O que eu aprendi
Desafio dia 13 - Loading com efeito
O que eu aprendi
Desafio dia 14 - Fundo de texto animado
O que eu aprendi
Desafio dia 15 - Texto flutuante
O que eu aprendi
Desafio dia 16 - Botão com efeito
O que eu aprendi
Desafio dia 17 - Loader animado
O que eu aprendi
Desafio dia 18 - Texto esfumaçado
O que eu aprendi
Desafio dia 19 - Efeitos de animação fundo de partículas
O que eu aprendi
Desafio dia 20 - Botão com efeito
O que eu aprendi
- box-shadow
- hover
- ::before
- *[Opacidade / transparência do CSS](https:/