Brenda-A-S / 30-days-css

Repositório de desafios para aprimorar CSS.

30diasDeCSS🚀

Oi gente✨... Aceitei esse desafio para treinar meu CSS, aprender coisas novas e melhorar meu portfólio🚀. Usei o seguinte repositório para realizar esses desafios: 30diasDeCSS

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

O que aprendi e utilizei:

• Transições CSS
• Construção de camadas
• Hover
• Nth-child
• Transform

Dia 2 - Loader animado

O que aprendi e utilizei:

• Animações CSS
• Before e after
• Calc

Dia 3 - Cor do background mudando

O que aprendi e utilizei:

• Animações CSS
• Hue-rotate

Dia 4 - Botão com efeito

O que aprendi e utilizei:

• Transições CSS
• Hover before

Dia 5 - Efeito pulsar

O que aprendi e utilizei:

• Transform
• Animações css
• After

Dia 6 - Texto brilhando

O que aprendi e utilizei:

• Animação CSS
• Nth-of-type
• Text-shadow

Dia 7 - Texto esfumaçado

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

Dia 8 - Texto com gradiente animado

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

Dia 9 - Efeito de Chuva

• Animação CSS + calc
• Var

Dia 10 - Ícones com efeito

• Animação CSS
• Hover

Dia 11 - Cards com animação flip

• Perspective
• Transform style
• Transform RotateY
• Backface Visibility

Dia 12 - Menu com efeito hover

• Hover
• Transition CSS
• Before e after
• Transform scale

Dia 13 - Botão checkbox de coração

• Before e After
• Input:checked
• Seletor de irmãos adjacentes '+'
• Transform rotate, translateY e translateX

Dia 14 - Imagens que expandem

• Overflow hidden
• Position relative e absolute
• Hover

Dia 15 - Texto flutuante

• Animação CSS
• Var

Dia 16 - Card com efeito de livro

• Hover
• Perspective
• Transform rotateX
• Transform origin

Dia 17 - Texto trocando de cor de uma div para a outra

• Animation CSS
• Mix-blend-mode difference

Dia 18 - Efeito de digitação

• Animations CSS
• Overflow
• Steps()
• White-space

Dia 19 - Barra de pesquisa

• :is
• :focus-within

Dia 20 - Menu hamburguer

• Seletores de irmãos '+' e '~'
• :nth-child
• Input:checked

Dia 21 - Tela de login

• nth-child, focus-within e hover
• apearence none

Dia 22 - Slider de imagens

• Overflow hidden
• Input radio & label
• Position relative e absolute
• :hover, :has, :nth-child e :checked
• Seletores de irmãos '~'

Video.do.WhatsApp.de.2023-05-22.a.s.19.19.41.mp4

Dia 23 - Checkbox dark-mode

• Label e input checkbox
• :checked e :has
• Transform scale e translateX
• Transition

Dia 24 - Card expansível

• Position relative e absolute
• :hover
• Transform translateY

Dia 25 - Título com hover

• :hover
• Transform translateY

Dia 26 - Card com hover

• Transform translateY, :hover e opacity
• Filter brightness
• Transition

Dia 27 - Slider CSS

• Animação CSS
• Overflow hidden
• Animation play state paused

2023-05-27.16-52-26.mp4

Dia 28 - Menu responsivo

• @media
• app-menu-hamburguer - Dia 20

Dia 29 - Footer responsivo

• @media

Video.do.WhatsApp.de.2023-05-29.a.s.16.36.41.mp4

Dia 30 - Tilt Effect

• Position relative e position absolute
• Display flex com space-between e flex-wrap wrap
• Perspective e transform-style preserve-3d
• Transform translateZ, Scale, RotateX e RotateY
• Transition
• Hover
• z-index