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:
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
Dia 10 - Ícones com efeito
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
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
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 '~'
https://github.com/Brenda-A-S/30-days-css/assets/69852246/873bd5ce-7343-4f3a-a6e9-4dd5a7ac6fd9
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
https://github.com/Brenda-A-S/Brenda-A-S/assets/69852246/ccedf5bc-0027-4527-8b0c-7b3c8e786120
Dia 28 - Menu responsivo
- @media
- app-menu-hamburguer - Dia 20
Dia 29 - Footer responsivo
https://github.com/Brenda-A-S/30-days-css/assets/69852246/29870782-5ae0-454c-83ed-f017d6475a61
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
