30 dias de CSS 🚀

Olá! 🖖 Estou começando o desafio 30 dias de CSS para praticar e adiquirir conhecimentos. Acompanhei o desafio no perfil do LinkedIn da Brenda Antunes e achei muito interessante. Acesse o repositório da Brenda.

Referências: Online Tutorials, Red Stapler e Daily Tuition.

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

O que aprendi e utilizei

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

Dia 2 - Loader animado

O que aprendi e utilizei

• CSS Animation
• CSS Transform
• CSS @keyframes

Dia 3 - Mudança de cor

O que aprendi e utilizei

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

Dia 4 - Botão com efeito

O que aprendi e utilizei

• Before
• Hover
• Transições

Dia 5 - Efeito pulsar

O que aprendi e utilizei

• Animações CSS
• Transform

Dia 6 - Efeito Texto brilhando

O que aprendi e utilizei

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

Dia 7 - Texto esfumaçado

O que aprendi e utilizei

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

Dia 9 - Pendulo de Newton

O que aprendi e utilizei

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

Dia 10 - Efeito máquina de escrever

O que aprendi e utilizei

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

Dia 11 - Ícones com efeito

O que aprendi e utilizei

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

Dia 12 - Card com animação flip

O que aprendi e utilizei

• Backface-visibility
• Perspective
• Transform rotateY
• Z-index

Dia 13 - Checkbox de coração

O que aprendi e utilizei

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

Dia 14 - Texto com gradiente animado

O que aprendi e utilizei

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

Dia 15 - Menu com efeito hover

O que aprendi e utilizei

• After e before
• Hover
• Transform scale
• Transition

Dia 16 - Galeria com hover

O que aprendi e utilizei

• Filter
• Hover
• Object-fit
• Overflow hidden
• Position relative e absolute
• Transition

Dia 17 - Card com efeito de livro

O que aprendi e utilizei

• Hover
• Perspective
• Transform rotateY
• transform origin

Dia 18 - Efeito de preenhimento com hover

O que aprendi e utilizei

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

Dia 19 - Foguete decolando

O que aprendi e utilizei

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

Dia 20 - Esferas quicando

O que aprendi e utilizei

• Animation
• Animation-delay
• Transform translateY

Dia 21 - Apple Watch Breathe<

O que aprendi e utilizei

• Animation
• Nth-child
• Trannsform translate

Dia 22 - Botão animado

O que aprendi e utilizei

• Animation
• Trnsform rotate

Dia 23 - Animação com texto alternado

O que aprendi e utilizei

• Animation
• Before

Dia 24 - Pontos animados

O que aprendi e utilizei

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

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 - Onda

O que aprendi e utilizei

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

Dia 27 - Card Hover

O que aprendi e utilizei

• Hover
• Object-fit
• Transition

Dia 28 - Card Expansível

O que aprendi e utilizei

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

Dia 29 - Ícone com efeito no hover

O que aprendi e utilizei

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

Dia 30 - Imagens om efeito no hover

O que aprendi e utilizei

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