/CSS30Days

Desafio CSS 30 - 1 projeto por dia

Primary LanguageCSS

šŸš€ CSS30Days šŸš€

html css sass

Desafio CSS 30 - 1 projeto por dia

  1. Dia 01 - ƍcone de Social Media com hover em camadas
  2. Dia 02 - Loader Animado em CSS puro
  3. Dia 03 - Texto que muda de cor ao cruzar uma Div
  4. Dia 04 - Profile Card
  5. Dia 05 - Hamburher Menu.
  6. Dia 06 - Video inside Text.
  7. Dia 07 - Card Skew Border.
  8. Dia 08 - Neon Text.
  9. Dia 09 - List Hover Style.
  10. Dia 10 - Rainy Background.
  11. Dia 11 - Cloud Animation.
  12. Dia 12 - Text Jumping.
  13. Dia 13 - Circular Progress Bar.
  14. Dia 14 - Solar Eclipse.
  15. Dia 15 - 3D Nav Bar.
  16. Dia 16 - Glowing Icon Hover.
  17. Dia 17 - Diamond Grid.
  18. Dia 18 - Creative Div Box.
  19. Dia 19 - Glowing Dots.
  20. Dia 20 - Wavy Background.
  21. Dia 21 - Ring of Fire.
  22. Dia 22 - Isometric Social Media Icons.

Dia 01 - ƍcone de Social Media com hover em camadas

  • Uso da Tag para criaĆ§Ć£o de camadas
  • Hover effect
  • Transition e Transform com CSS
  • nth-child( )

Day01

Dia 02 - Loader Animado em CSS puro

  • Uso das propriedades Transform, Animate e Translate em CSS puro

Day02

Dia 03 - Texto que muda de cor ao cruzar uma Div

  • Uso da propriedade Animation
  • aprofundamento do conceito de overflow no CSS

Day03

Dia 04 - Profile Card

  • Uso da propriedade anime e transform
  • manipulaĆ§Ć£o de @keyframes

day04

Dia 05 - Hamburher Menu

  • uso de transform e transition
  • overflow hidden

hamburger

Dia 06 - VĆ­deo dentro de Texto

  • importaĆ§Ć£o de font do Google Fonts para escrita em alfabeto grego
  • video input
  • uso do object-fit em css para o ajuste do vĆ­deo com o texto

video

Dia 07 - Card Skew Border

  • imersĆ£o nas propriedades transform, skew e translateY do CSS
  • background linear gradient
  • hue-rotate

skew

Dia 08 - Texto em Neon

  • criaĆ§Ć£o de checkbox's em HTML
  • estilizaĆ§Ć£o dos checkbox's em Css
  • animation glow linear infinite
  • manipulaĆ§Ć£o de keyframes

neon

Dia 09 - List Hover Style

  • manipulaĆ§Ć£o de elementos com nth-chil()
  • transform scale
  • hover style

list

Dia 10 - Rainy Background

  • Em Css puro
  • Uso de animation linear e infinite
  • manipulaĆ§Ć£o de @keyframes
  • hue-rotate

background rain

Dia 11 - Cloud Animation

  • ManipulaĆ§Ć£o de Animations e Keyframes

cloud

Dia 12 - Text Jumping

  • animation bounce eade infinite alternate entre os elementos span do html
  • text shadow
  • animation -delay para cada span
  • manipulaĆ§Ć£o de @keyframes

textJumping

Dia 13 - Circular Progress Bar

  • transform translateY
  • manipulaĆ§Ć£o de transitions
  • propriedade stroke

bar

Dia 14 - Solar Eclipse

  • explorando os conceitos de transform translate, animation e z-index
  • manipulaĆ§Ć£o de keyframes

eclipse

Dia 15 - 3D Nav Bar

  • ManipulaĆ§Ć£o das propriedades transform rotateX e rotateY, Skew
  • webkit e transitions

3dnavbar

Dia 16 - Glowing Icon Hover

  • animations, transitions
  • font awesome icons

glow

Dia 17 - Diamond Grid

  • transform rotate(45deg)
  • opacity
  • glow in hover

glow

Dia 18 - Animated Div Box

  • manipulaĆ§Ć£o de keyframes para trabalhar com camadas de span
  • transform e transition

Animated

Dia 19 - Glowing Dots

  • nth-child para manipulaĆ§Ć£o de elementos
  • animation e keyframes

glowingdots

Dia 20 - Wavy Background

  • manipulaĆ§Ć£o de keyframes e animation-delay
  • opacity
  • animation

waves

Dia 21 - Ring of Fire

  • baseFrequency e animate
  • -webkit
  • animation e Keyframes

ring

Dia 22 - Isometric Social Media Icons

  • transform translate
  • transform perspective, rotate, skew , translate
  • after and before

icons