Skip to content

Brenda-A-S/30-days-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 

Repository files navigation

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

desafios

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

Design sem nome

Dia 2 - Loader animado

O que aprendi e utilizei:

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

Design sem nome

Dia 3 - Cor do background mudando

O que aprendi e utilizei:

  • Animações CSS
  • Hue-rotate

Design sem nome

Dia 4 - Botão com efeito

O que aprendi e utilizei:

  • Transições CSS
  • Hover before

4

Dia 5 - Efeito pulsar

O que aprendi e utilizei:

  • Transform
  • Animações css
  • After

Design sem nome

Dia 6 - Texto brilhando

O que aprendi e utilizei:

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

6

Dia 7 - Texto esfumaçado

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

7

Dia 8 - Texto com gradiente animado

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

8

Dia 9 - Efeito de Chuva

  • Animação CSS + calc
  • Var

9

Dia 10 - Ícones com efeito

  • Animação CSS
  • Hover

10

Dia 11 - Cards com animação flip

  • Perspective
  • Transform style
  • Transform RotateY
  • Backface Visibility

11

Dia 12 - Menu com efeito hover

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

12

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

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

13

Dia 14 - Imagens que expandem

  • Overflow hidden
  • Position relative e absolute
  • Hover

14

Dia 15 - Texto flutuante

  • Animação CSS
  • Var

15

Dia 16 - Card com efeito de livro

  • Hover
  • Perspective
  • Transform rotateX
  • Transform origin

16

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

  • Animation CSS
  • Mix-blend-mode difference

17

Dia 18 - Efeito de digitação

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

18

Dia 19 - Barra de pesquisa

  • :is
  • :focus-within

19

Dia 20 - Menu hamburguer

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

20

Dia 21 - Tela de login

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

21

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

23

Dia 24 - Card expansível

  • Position relative e absolute
  • :hover
  • Transform translateY

24

Dia 25 - Título com hover

  • :hover
  • Transform translateY

25

Dia 26 - Card com hover

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

26

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

28

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

30

About

Repositório de desafios para aprimorar CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published