Marina-teixeira/30_dias_css

Desafio de 30 mini-projetos feitos em 30 dias utilizando HTML e CSS.

30 dias com CSS!

Olá! Estou começando o desafio 30 dias de CSS para praticar e adiquirir conhecimentos. O desafio consiste em fazer um mini projeto por dia utilizando HTML e CSS durante 30 dias.

Referências usadas: CodingNepal

Regras

• Realizar um projeto por dia;
• Adicionar o código do projeto no GitHub;
• Compartilhar o seu progresso nas mídias sociais (LinkedIn, Twitter, Facebook...) usando a hashtag #30diasDeCSS,
• O projeto deve ser concluído até as 23:59;

Dia 1 - Barra de progresso circular

O que eu aprendi e utilizei

• CSS animation
• CSS @keyframes
• Transform
• z-index

Dia 2 - Mudança de cor

O que aprendi e utilizei

• CSS Animation
• CSS Filter - Hue rotate
• CSS @keyframes

Dia 3 - Botão com efeito

O que aprendi e utilizei

• Before
• Hover
• Transições

Dia 4 - Efeito texto brilhando

O que aprendi e utilizei

• Animações CSS
• Nth-of-type
• Text-shadow

Dia 5 - Efeito pulsar

O que aprendi e utilizei

• Animações CSS
• Transform

Dia 6 - texto esfumaçado

O que aprendi e utilizei

• Filter blur
• Rotate e translate
• Transição e delay

Dia 7 - Pendulo de Newton

O que aprendi e utilizei

• Animação CSS
• Before
• Fist-child
• Last-child

Dia 8 - Efeito máquina de escrever

O que aprendi e utilizei

• Animação CSS
• Overflow
• White-space

Dia 9 - Ícones com efeito

O que aprendi e utilizei

• After/before
• Animação CSS
• Hover

Dia 10 - Checkbox de coração

O que aprendi e utilizei

• After e before
• Input:checked
• Radial gradient
• Transform translate

Dia 11 -Ícone de mídia social em camadas

O que aprendi e utilizei

• Camadas
• Hover
• Nth-child
• Transcições
• Transform

Dia 12 - Texto com gradiente animado

O que aprendi e utilizei

• Animação CSS
• Background-clip
• Linear-gradient
• Text fill color

Dia 13 - Menu com efeito hover

O que aprendi e utilizei

• After e before
• Hover
• Transform scale
• Transition

Dia 14 - Preloader animado

O que aprendi e utilizei

• Animations
• Nth-child ()

Dia 15 - Efeito de preenchimento com hover

O que aprendi e utilizei

• Before
• Hover
• Overflow hidden
• Transotions
• Webkit text stroke

Dia 16 - Loading com efeito

O que aprendi e utilizei

• Animations
• Nth-child ()

Dia 17 - Esferas quicando

O que aprendi e utilizei

• Nth-child ()
• Animations

Dia 18 - Galeria com hover

O que aprendi e utilizei

• Filter
• Hover
• Object-fit
• Overflow hidden
• Transition

Dia 19 - Apple watch breath

O que aprendi e utilizei

• Animation
• Nth-child
• Trannsform translate

Dia 20 - Botão animado

O que aprendi e utilizei

• Animation
• Transform rotate

Dia 21 - Animação de texto alternando

O que aprendi e utilizei

• Before
• Animations

Dia 22 - Foguete decolando

O que aprendi e utilizei

• Animation
• Bootstrap icon
• Overflow hidden
• Rotate
• Translate
• Z-index

Dia 23 - Pontos animados

O que aprendi e utilizei

• Animation
• Moz-animation
• Nth-child
• Transform-translate
• Webkit-animation

Dia 24 - Onda

O que aprendi e utilizei

• Animation
• Overflow hidden
• Position relative e absolute
• Transform translate/rotate

Dia 25 - Slider de imagens

O que aprendi e utilizei

• :Hover, has, nth-child e checked
• Input radio e label
• Overflow hidden
• Position relative e absolut

Dia 26 - Card com efeito de livro

O que aprendi e utilizei

• Hover
• Perspective
• Transform rotateY
• Transform origin

Dia 27 - Ícone com efeito no hover

O que aprendi e utilizei

• Backgroung-clip
• Hover
• Overflow hidden
• Position absolute e relative
• Transform rotateZ
• Transition

Dia 28 - Card hover

O que aprendi e utilizei

• Hover
• Object-fit
• Transition

Dia 29 - Imagens com efeito no hover

O que aprendi e utilizei

• Background-position
• Hover
• Filter
• Nth-of-type
• Perspective
• Transform rotateX, translateZ
• Transition
• z-index

Dia 30 - Card expansível

O que aprendi e utilizei

• Hover
• Overflow hidden
• Position absolute e relative +Text overflow
• Transform translateY
• Transition