30 Dias de CSS 🚀

Este é um desafio que tem como objetivo por em prática habilidades de codificação com a criação de mini projetos diários utilizando HTML5 e CSS3 (adicionei um pouco de JavaScript).

Criado por @MilenaCarecho

Objetivo

Durante 30 dias seguidos devo criar mini projetos com HTML5 e CSS3, além de compartilhar meu progresso nas mídias sociais (Ex.: Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS

Clique aqui para participar

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode

• Dia 01 - Loader animado

• Dia 02 - Ícones de rede social com efeito

• Dia 03 - Glassmorphism Card

• Dia 04 - Loader animado

• Dia 05 - Menu de navegação circular

• Dia 06 - Popup para mensagem

• Dia 07 - Borda animada

• Dia 08 - Menu animado

• Dia 09 - Botões criativos

• Dia 10 - Botões com efeitos

• Dia 11 - Cards com efeitos

• Dia 12 - Formulário de Login

• Dia 13 - Card de apresentação

• Dia 14 - Card para E-commerce

• Dia 15 - Menu acordeão

• Dia 16 - Card para E-commerce

• Dia 17 - Card formulário

• Dia 18 - Card para post

• Dia 19 - Barra de pesquisa

• Dia 20 - Menu de navegação

• Dia 21 - Loader animado

• Dia 22 - Botão de deletar

• Dia 23 - Botão para avaliação

• Dia 24 - Barra de porcentagem

• Dia 25 - Efeito em imagens

• Dia 26 - Animação

• Dia 27 - Checkbox xícara de café

• Dia 28 - Loader animado

• Dia 29 - Barra de navegação

• Dia 30 - Input para senha

  Dia 01 - Loader animado

  

Meu codigo
Post LinkedIn

O que eu aprendi

Criar as camadas utilizando a tag

transform

transition

box-shadow

animations

overflow

::before

z-index

position

@keyframes

Dia 02 - Ícones de rede social com efeito

Meu codigo
Post LinkedIn

O que eu aprendi

transform

transition

box-shadow

overflow

::before

:hover

position

CSS Gradients

-webkit-background-clip

-webkit-text-fill-color

Dia 03 - Glassmorphism Card

Meu codigo
Post LinkedIn

O que eu aprendi

transition

calc()

:hover

position

CSS Gradients

Dia 04 - Loader animado

Meu codigo
Post LinkedIn

O que eu aprendi

transition

::before

position

::after

animations

@keyframes

inset

Dia 05 - Menu de navegação circular

Meu codigo
Post LinkedIn

O que eu aprendi

transition

transform

position

calc()

z-index

box-sizing

Dia 06 - Popup para mensagem

Meu codigo
Post LinkedIn

O que eu aprendi

transition

transform

position

box-sizing

:hover

box-shadow

overflow

Dia 07 - Borda animada

Meu codigo
Post LinkedIn

O que eu aprendi

transform

position

box-sizing

overflow

::before

::after

animations

@keyframes

inset

Dia 08 - Menu animado

Meu codigo
Post LinkedIn

O que eu aprendi

transform

box-sizing

overflow

::before

:hover

-webkit-text-stroke

filter

attr

gap

Dia 09 - Botões criativos

Meu codigo
Post LinkedIn

O que eu aprendi

transform

box-sizing

:checked

::before

transition

appearance

selectors

Dia 10 - Botões com efeitos

Meu codigo
Post LinkedIn

O que eu aprendi

box-sizing

overflow

::before

:hover

transition

z-index

position

Dia 11 - Cards com efeitos

Meu codigo
Post LinkedIn

O que eu aprendi

box-sizing

:hover

transition

grid-template-columns

grid-gap

display

transform

Dia 12 - Formulário de Login

Meu codigo
Post LinkedIn

O que eu aprendi

transition

transform

attribute selectors

:focus

:hover

Dia 13 - Card de apresentação

Meu codigo
Post LinkedIn

O que eu aprendi

transition

:hover

:nth-child

Dia 14 - Card para E-commerce

Meu codigo
Post LinkedIn

O que eu aprendi

transition

transform

overflow

::before

:hover

Dia 15 - Menu acordeão

Meu codigo
Post LinkedIn

O que eu aprendi

transition

transform

@media

:target

::after

::before

calc()

background-size

flex-wrap

Dia 16 - Card para E-commerce

Meu codigo
Post LinkedIn

O que eu aprendi

transition

@media

:hover

flex

display

overflow

flex-wrap

Dia 17 - Card formulário

Meu codigo
Post LinkedIn

O que eu aprendi

position

transition

:hover

display

overflow

Dia 18 - Card para post

Meu codigo
Post LinkedIn

O que eu aprendi

transform

transition

:hover

display

overflow

flex-wrap

@media

Dia 19 - Barra de pesquisa

Meu codigo
Post LinkedIn

O que eu aprendi

transform

transition

overflow

position

::before

::after

Dia 20 - Menu de navegação

Meu codigo
Post LinkedIn

O que eu aprendi

transform

transition

display

::before

::after

inset

gap

box-shadow

filter

Dia 21 - Loader animado

Meu codigo
Post LinkedIn

O que eu aprendi

transform

display

@keyframes

animations

:nth-child

Dia 22 - Botão de deletar

Meu codigo
Post LinkedIn

O que eu aprendi

transform

transition

:focus

:hover

::before

overflow

Dia 23 - Botão para avaliação

Meu codigo
Post LinkedIn

O que eu aprendi

transform

transition

::before

::after

inset

filter

overflow

:nth-child

selectors

Dia 24 - Barra de porcentagem

Meu codigo
Post LinkedIn

O que eu aprendi

transform

::before

::after

box-sizing

@keyframes

Dia 25 - Efeito em imagens

Meu codigo
Post LinkedIn

O que eu aprendi

transition

filter

:hover

:nth-child

::before

overflow

Dia 26 - Animação

Meu codigo
Post LinkedIn

O que eu aprendi

transform

box-sizing

filter

transform-origin

animations

:nth-child

::before

::after

@keyframes

Dia 27 - Checkbox xícara de café

Meu codigo
Post LinkedIn

O que eu aprendi

transform

transition

box-sizing

filter

transform-origin

appearance

:last-child

:checked

Dia 28 - Loader animado

Meu codigo
Post LinkedIn

O que eu aprendi

transform

box-sizing

filter

animations

::before

@keyframes

Dia 29 - Barra de navegação

Meu codigo
Post LinkedIn

O que eu aprendi

box-sizing

transition

position

display

text-decoration

Dia 30 - Input para senha

Meu codigo
Post LinkedIn

O que eu aprendi

box-sizing

transform

position

display

box-shadow

outline

::placeholder