🎨 Outras Formatações CSS

📚 Objetivo da Aula: Explorar técnicas avançadas de CSS incluindo box model, variáveis CSS, formatação de imagens, dimensionamento e efeitos visuais modernos. Cada conceito será demonstrado com exemplos práticos e interativos.

📦 1. Box Model - O Coração do CSS

O box model é fundamental para entender como os elementos são dimensionados e posicionados. Cada elemento é composto por: content, padding, border e margin.

🔍 Visualização do Box Model:

📏 box-sizing: content-box
Largura = content apenas

📦 box-sizing: border-box
Largura = content + padding + border

Margin (15px)

Padding (15px)

Content
O conteúdo real do elemento

🎯 Diferença Crucial:
• content-box - Padding e border são ADICIONADOS à largura
• border-box - Padding e border são INCLUÍDOS na largura
• Dica: Use sempre box-sizing: border-box para facilitar cálculos!

🎨 2. Variáveis CSS - Sistema de Design Consistente

As variáveis CSS (custom properties) permitem criar sistemas de design reutilizáveis e fáceis de manter.

🚀 Exemplo Prático de Variáveis:

/* 🎨 Definindo variáveis no :root */
:root {
  --primary-color: #667eea;
  --spacing-medium: 16px;
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

/* ✨ Usando as variáveis */
.meu-botao {
  background: var(--primary-color);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

🎯 Clique e veja a transição suave usando variáveis CSS!

🎨 Cores
--primary-color
--secondary-color

📏 Espaçamentos
--spacing-small
--spacing-large

🔤 Tipografia
--font-size-large
--font-size-xl

🎭 Efeitos
--shadow
--transition

💡 Vantagens das Variáveis CSS:
• Consistência: Cores e espaçamentos padronizados
• Manutenção: Altere em um lugar, mude em todo o site
• Temas: Fácil implementação de modo escuro/claro
• Performance: Não requer JavaScript para mudanças

🖼️ 3. Formatação Avançada de Imagens

CSS oferece ferramentas poderosas para estilizar imagens de forma criativa e responsiva.

🎨 Galeria de Estilos de Imagem:

🎯 CIRCULAR

Imagem Circular
border-radius: 50%

📱 MODERNA

Bordas Arredondadas
border-radius: 15px

📸 POLAROID

Efeito Polaroid
transform: rotate(-2deg)

🎭 Filtros CSS Interativos:

Passe o mouse sobre as imagens para remover o filtro!

🎨

Grayscale

🌅

Sepia

📷

Blur

☀️

Brightness

🔆

Contrast

🌈

Saturate

🎨 Filtros CSS Disponíveis:
• filter: grayscale(100%) - Remove todas as cores
• filter: sepia(100%) - Efeito sépia vintage
• filter: blur(5px) - Desfoque controlado
• filter: brightness(150%) - Ajusta brilho
• filter: contrast(200%) - Intensifica contraste
• filter: saturate(200%) - Aumenta saturação

📐 4. Dimensionamento e Unidades de Medida

Compreender as diferentes unidades de medida é crucial para layouts responsivos e consistentes.

📏 Comparação Visual de Unidades:

200px × 100px
Pixels absolutos

12em × 6em
Relativo ao elemento pai

12rem × 6rem
Relativo ao root (html)

100% × 100px
Porcentagem do pai

🎯 Dimensionamento Responsivo:

width: 100%
min-width: 200px
max-width: 400px
Redimensione a janela para testar!

📊 Quando Usar Cada Unidade:
• px - Bordas, sombras, elementos fixos
• em - Padding, margin relativos ao elemento
• rem - Font-size, espaçamentos consistentes
• % - Larguras responsivas, layouts fluidos
• vh/vw - Altura/largura da viewport
• min/max - Controles de dimensão responsiva

✨ 5. Efeitos Visuais Modernos

CSS moderno oferece ferramentas para criar efeitos visuais impressionantes sem JavaScript.

🎭 Galeria de Efeitos Interativos:

Passe o mouse sobre os cards para ver os efeitos!

🌈 Gradiente Animado

🔮 Glassmorphism

💡 Neon Glow

🎯 Efeito 3D

🎨 Técnicas dos Efeitos:
• Gradiente Animado: background-size + animation
• Glassmorphism: backdrop-filter: blur()
• Neon: text-shadow + box-shadow
• 3D: perspective + transform

🎮 6. Demonstração Interativa

🎨 Teste de Cores do Sistema:

Clique nas cores para aplicar ao fundo desta seção:

🎯 Demonstra o poder das variáveis CSS!
Uma mudança global instantânea

🚀 Dicas de Performance:

Use transform em vez de mudar position para animações
Prefira will-change para elementos que serão animados
Otimize imagens com formatos modernos (WebP, AVIF)
Use contain para isolar mudanças de layout

🎯 Aplicações Práticas:

Design System: Use variáveis para consistência
Tema Escuro: Troque variáveis com CSS ou JS
Responsividade: Combine unidades relativas
Micro-interações: Efeitos sutis melhoram UX