Módulo Final

Domine CSS na
Prática

Aprenda a criar layouts incríveis, do posicionamento às animações, usando os superpoderes do Flexbox e CSS Grid. Escreva menos código e crie interfaces modernas.

Começar AgoraVer Documentação
Preview: Grid Responsivo
1
2
3
4
5
6
style.css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
Estrutura

Box Model e Cores

A regra de ouro da web: Todo elemento é uma caixa retangular. Entenda as camadas invisíveis e os sistemas matemáticos de cor.

O Modelo de Caixa

Sou um conteúdo protegido pelo Padding, Border e Margin!
.caixa-magica {
  padding: 30px; /* Câmera de ar interna */
  border: 5px dashed #000; /* Borda visível */
  margin: 20px; /* Campo de força externo */
}

Sistemas de Cores & Variáveis

Hexadecimal: #8A2BE2
RGB(a): 40% de Transparência

Variável CSS (:root)

:root {
  --cor-primaria: #8A2BE2;
}
.botao {
  background-color: var(--cor-primaria);
}
Conceito

Flexbox vs Grid: O Duelo de Layouts

Entenda de uma vez por todas a diferença entre os dois maiores aliados da estilização moderna no CSS.

☰

O Uso Flexbox

Ideal para alinhamentos unidimensionais (uma linha ou uma coluna de cada vez). Perfeito para menus de navegação, botões e barras de ferramentas.

1
2
3
flex.css
.menu {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
⊞

O Uso Grid

O mestre bidimensional. Projetado para criar o esqueleto completo da página, controlando linhas e colunas simultaneamente de forma robusta.

1
2
3
4
5
6
grid.css
.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
Mão na Massa

Flexbox em Ação

Esqueça os "hacks" de antigamente. Centralize elementos e distribua espaços com duas linhas de código.

1. Centralização Perfeita

O Santo Graal do CSS antigo, resolvido com justify-content e align-items.

1
2
3
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Distribuição Equitativa

Empurre os elementos para as bordas perfeitamente usando space-between.

1
2
3
.box {
  display: flex;
  justify-content: space-between;
}
Mão na Massa

CSS Grid em Ação

Construa o esqueleto de toda a sua aplicação criando áreas de layout perfeitas e responsivas.

1. Colunas Responsivas Automáticas

Use o auto-fit e minmax para criar grids que se adaptam sem media queries.

1
2
3
4
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

2. Áreas Nomeadas (Grid Areas)

Crie o mapa da sua página dando nomes as áreas. Extremamente visual e intuitivo.

header
sidebar
main
footer
.pagina {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
Movimento

Posicionamento e Animações

Tire elementos do fluxo normal, controle a sobreposição (Z-Index) e crie vida com @keyframes e Transições.

Absolute & Z-Index

Pai (Relative)
Absoluto (Filho)
Z-index: 1
Z-index: 99
.pai { position: relative; }
.filho { 
  position: absolute; 
  top: 10px; 
  right: 10px;
}
.camada-frente { z-index: 99; }

Transitions & @Keyframes

Animando Infinito!
.botao { transition: all 0.4s; }
.botao:hover { transform: scale(1.05); }

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.item { animation: flutuar 3s infinite; }
Aparência

Efeitos Visuais e Sombras

Dê profundidade, arredonde cantos e crie texturas modernas sem usar uma única imagem externa.

Formas & Profundidade

Sombra 3D!

border-radius: 50%;

box-shadow: 5px 5px 20px rgba(...);
text-shadow: 2px 2px 4px #8A2BE2;

Degradês & Filtros

Linear Gradient
Avatar
background-image: 
  linear-gradient(to right, #8A2BE2, #ff1493);

filter: blur(2px) grayscale(80%);

O Neumorfismo

background: #e0e5ec;
box-shadow: 
  9px 9px 16px rgba(163,177,198,0.6), 
  -9px -9px 16px rgba(255,255,255,0.5);
Resumo

Guia de Decisão: Quando usar qual?

Use Flexbox se você precisa de:

  • ✓Alinhamento vertical ou horizontal simples.
  • ✓Distribuir espaço entre botões ou itens de menu.
  • ✓Layout fluido onde os itens ditam o tamanho.

Use CSS Grid se você precisa de:

  • ✓Controle simultâneo de linhas e colunas.
  • ✓Criar o esqueleto base de uma página web inteira.
  • ✓Sobreposição de elementos na mesma célula.
Dicionário

Propriedades Essenciais

Um resumo rápido das propriedades mais usadas no dia a dia da formatação de layouts.

PropriedadeContextoO que faz?
justify-contentFlexboxAlinha os itens no eixo principal (horizontal por padrão).
align-itemsFlexboxAlinha os itens no eixo secundário (vertical por padrão).
grid-template-columnsGridDefine a quantidade e a largura das colunas da malha.
gapAmbosCria um espaçamento perfeito e simétrico entre os itens.
Boas Práticas

Dicas de Engenharia Front-end

Escrever CSS é fácil. Escrever um CSS sustentável e escalável que não quebra no futuro exige técnica.

1. Evite alturas fixas (height)

Deixe que o conteúdo e os paddings determinem a altura dos elementos. Ao travar um `height: 100px;`, seu texto vai transbordar quando a tela diminuir no celular.

2. Mobile First

Sempre escreva o CSS base pensando no celular primeiro. Use os `@media queries` (ex: `min-width: 768px`) apenas para adaptar e expandir o layout para telas maiores.

3. Use Unidades Relativas

Esqueça os Pixels (`px`) absolutos. Acostume-se a usar `rem` e `em` para tamanhos de fontes e margens. Isso garante acessibilidade e um design elástico.

Finalização

Pronto para dominar CSS de verdade?

Você acabou de ver a fundação dos layouts e os conceitos visuais em tempo real. Agora é a sua vez de colocar a mão no código.

Retornar aos Módulos da Caixa