Repositório destinado aos projetos do desafio de 30 dias de CSS. O objetivo é construir 30 mini projetos, a partir do dia 27 de abril de 2021, utilizando HTML e CSS, para desenvolver as habilidades de codificação do front-end.
- 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.
- Dia 01 - Ícones de mídias sociais em camadas
- Dia 02 - Loader animado
- Dia 03 - Mudança de cor de texto quando entra em outra div
- Dia 04 - Botão com animação na borda
- Dia 05 - Botão com efeito de 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 com texto alternando
- Dia 11 - Botão com efeito de preenchimento no hover
- Dia 12 - Efeito de preenchimento do texto ao passar o mouse
- Dia 13 - Loader animado
- Dia 14 - Background de texto animado
- Dia 15 - Ilustração com efeito líquido
- Dia 16 - Botão animado com hover e transform
- Dia 17 - Relógio com design de neomorfismo
- Dia 18 - Switch para o modo claro/escuro
- Dia 19 - Chat de mensagens com indicador de que alguém está digitando
- Dia 20 - Virar cartão
- Dia 21 - Loader animado
- Dia 22 - Card com efeito vidro
- Dia 23 - Animação do sistema solar
- Dia 24 - Preloader
- Dia 25 - To-do list
- Dia 26 - Botão de download animado
- Dia 27 - Animação para alterar cor do gradiente
- Dia 28 - Animação da vela queimando
- Dia 29 - Menu responsivo
- Dia 30 - Animação de fogos de artifício
O que aprendi:
skew()rotate()nth-child()- Criação das camadas com a tag
<span></span>e com o:hover
O que aprendi:
- Propriedade
border-top - Criação de animações
O que aprendi:
- Efeito de marquee com CSS
- Propriedade
mix-blend-mode - Animação com
translateX()
O que aprendi:
::beforee::after- Manipular elementos SVG com as tags
<svg>e<rect> - Propriedades CSS para manipular elementos SVG:
strokestroke-widthstroke-dasharraystroke-dashoffset
O que aprendi:
- Animação com
box-shadow
O que aprendi:
- Animação com delay
text-shadow
O que aprendi:
- Animação com
::beforee delay - Porcentagem no
@keyframes
O que aprendi:
- Animação com a função
scale()da propriedadetransformdo CSS
O que aprendi:
transform-origin- Animação com a função
rotate() ::after
O que aprendi:
::after- Propriedade
content
O que aprendi:
- Transição no
:hovercom variação de altura do elemento::after
O que aprendi:
- Transição no
:hovercom variação do tamanho do elemento::after - Propriedade
white-space
O que aprendi:
- Animação com
translateX()eanimation-delay
O que aprendi:
background-clipbackground-position
O que aprendi:
- Efeito líquido utilizando
::after,::before,animationetransform
O que aprendi:
hover- Propriedade
transforme suas funçõesscale(),rotate()etranslate()
O que aprendi:
- Propriedade
box-shadowcom valores negativos - Sombra interna (
inset)
Ideia base para a estilização do switch
O que aprendi:
- Substituir estilização padrão do
inputdo tipo checkbox
O que aprendi:
- Animação com
scale()dotransform - Referência unicode de emojis no HTML
O que aprendi:
rotateY()transform-stylebackface-visibility
O que aprendi:
translateY()- Animação com variação de tamanho de elementos
O que aprendi:
- Função
blur()da propriedadebackdrop-filter - Propriedade
align-itemspara o display grid
O que aprendi:
- Animação com diferentes durações para cada elemento
rotate(360deg)- Posicionamento
O que aprendi:
- Animações com
@keyframes
O que aprendi:
- Alterar estilização padrão do checkbox com pseudo-elementos e
:checked
O que aprendi:
- Posicionamento com valor negativo
- Animação com pseudo-elementos
- Barra de progresso
O que aprendi:
background-size- Animação com
background-position
O que aprendi:
- Animação com
border-radiusescale()
O que aprendi:
- Media queries
O que aprendi:
- Mais de um valor para o
box-shadow
Feito com ❤ por Fabiana Pereira