Arquivos curso css3 completo - Web-Zoneware https://webzoneware.com/tag/curso-css3-completo/ Mais do que apenas uma academia web. Thu, 22 Oct 2026 03:55:12 +0000 pt-BR hourly 1 https://webzoneware.com/wp-content/uploads/icon-webzoneware-150x150.png Arquivos curso css3 completo - Web-Zoneware https://webzoneware.com/tag/curso-css3-completo/ 32 32 Filtros e Glassmorphism Modernos no CSS | Web Academy https://webzoneware.com/web-academy/curso-css/filtros-css-backdrop-filter-glassmorphism/ https://webzoneware.com/web-academy/curso-css/filtros-css-backdrop-filter-glassmorphism/#respond Thu, 22 Oct 2026 03:55:12 +0000 https://webzoneware.com/?p=29471 A estética visual dos sistemas operacionais contemporâneos — como o macOS da Apple e o Windows 11 — é fortemente inspirada no mundo físico: materiais translúcidos, placas de acrílico e vidros foscos que revelam suavemente o que está por trás da interface. No passado, para criar um desfoque realista ou transformar uma imagem em preto […]

O post Filtros e Glassmorphism Modernos no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> A estética visual dos sistemas operacionais contemporâneos — como o macOS da Apple e o Windows 11 — é fortemente inspirada no mundo físico: materiais translúcidos, placas de acrílico e vidros foscos que revelam suavemente o que está por trás da interface. No passado, para criar um desfoque realista ou transformar uma imagem em preto e branco, os designers precisavam recorrer a softwares como Photoshop ou Figma e exportar arquivos pesados. Hoje, o CSS possui um motor gráfico de pós-processamento completo com as propriedades filter e backdrop-filter, permitindo criar o famoso efeito Glassmorphism nativamente no navegador.

1. O Motor de Filtros Gráficos: A Propriedade filter

A propriedade filter processa a renderização de pixels do próprio elemento e de todos os seus filhos. Ela aceita uma série de funções visuais prontas:

Função Valores de Exemplo Efeito Visual na Interface
blur() blur(8px) Aplica um desfoque gaussiano suave sobre o elemento.
brightness() brightness(1.3) (30% mais claro) Ajusta o ganho de luz (excelente para acender cards no :hover).
contrast() contrast(150%) Aumenta ou reduz a separação entre tons claros e escuros.
grayscale() grayscale(100%) Converte a imagem inteiramente para tons de cinza (preto e branco).
drop-shadow() drop-shadow(0 4px 12px rgba(0,0,0,0.5)) A Sombra com Canal Alfa: Projeta sombra ao longo do contorno real de PNGs e SVGs!

A Diferença Crucial: box-shadow vs. filter: drop-shadow()

Dica Sênior de SVG e PNG: A propriedade box-shadow projeta uma sombra quadrada em torno da caixa física do elemento, mesmo que a imagem seja um círculo ou logotipo transparente. Já o filter: drop-shadow() analisa o canal de transparência (Alpha Channel) da imagem e contorna os traços reais do ícone ou foto recortada!

2. filter vs. backdrop-filter: A Fronteira do Vidro

A diferença entre essas duas propriedades é o ponto onde muitos desenvolvedores se perdem:

  • filter: Borra o próprio elemento e seu texto. Se você aplicar filter: blur(10px) em um card, todo o texto e botões dentro dele ficarão embaçados e impossíveis de ler!
  • backdrop-filter: Borra exclusivamente a área gráfica localizada ATRÁS do elemento! O texto, os botões e a borda da caixa permanecem com 100% de nitidez cristalina.

3. A Receita dos 4 Ingredientes do Glassmorphism Perfeito

Para criar aquele visual futurista de placa de vidro translúcida sobreposta a elementos da página, você precisa combinar exatamente estes 4 passos:

CSS3 17 linhas 
.card-glassmorphism {
  /* 1. Fundo Semitransparente (Nunca use cor 100% sólida!) */
  background: rgba(255, 255, 255, 0.08);
 
  /* 2. O Desfoque Gaussiano de Fundo (A magia do vidro fosco) */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Fallback para Safari antigo */
 
  /* 3. Borda Translúcida (Simula o corte e bisel da quina do vidro) */
  border: 1px solid rgba(255, 255, 255, 0.18);
 
  /* 4. Sombra de Difusão Atmosférica Profunda */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 
  border-radius: 16px;
  padding: 24px;
}

4. Acessibilidade e Contraste Legível (WCAG 2.2)

O Perigo do Vidro Ilegível: O maior pecado do Glassmorphism é colocar um fundo translúcido quase invisível sobre um fundo cheio de detalhes coloridos, tornando o texto branco impossível de ser lido por pessoas com baixa acuidade visual. Para estar em conformidade com o Critério 1.4.3 da WCAG (Contraste Mínimo de 4.5:1):

  • Mantenha a opacidade da cor de fundo (RGBA) entre 15% e 25%.
  • Use sombras sutis no texto: text-shadow: 0 2px 4px rgba(0,0,0,0.5); para garantir contraste mesmo se o fundo de trás mudar de cor.

5. Suporte Defensivo com @supports

Dispositivos antigos ou navegadores operando em modo de economia de energia podem desativar o backdrop-filter. Garantimos a legibilidade com a regra-arroba @supports:

CSS3 13 linhas 
/* Fallback padrão para navegadores sem suporte a blur */
.card-glass {
  background: #1e293b; /* Fundo sólido seguro */
}
 
/* Se o navegador suportar backdrop-filter, ativa o vidro fosco */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .card-glass {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

6. Laboratório Prático: Cartão Glassmorphic sobre Esferas Animadas

No código interativo abaixo, criamos um cartão translúcido com backdrop-filter: blur(16px) flutuando sobre esferas coloridas de gradiente, acompanhado de logotipos tratados com filter: grayscale:

HTML5 117 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Glassmorphism e Filtros CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #030712;
      color: #f8fafc;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0;
      position: relative;
      overflow: hidden;
    }
 
    /* ESFERAS COLORIDAS NO FUNDO PARA TESTAR O DESFOQUE */
    .esfera-fundo-1 {
      position: absolute;
      top: 15%;
      left: 20%;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      filter: blur(40px);
      z-index: 1;
    }
 
    .esfera-fundo-2 {
      position: absolute;
      bottom: 20%;
      right: 25%;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: linear-gradient(135deg, #10b981, #06b6d4);
      filter: blur(35px);
      z-index: 1;
    }
 
    /* O CARTÃO GLASSMORPHISM AUTÊNTICO */
    .card-vidro {
      position: relative;
      z-index: 2; /* Fica acima das esferas */
      max-width: 440px;
      background: rgba(255, 255, 255, 0.05); /* 1. Fundo semitransparente */
      backdrop-filter: blur(16px);            /* 2. Desfoque atrás do vidro */
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.15); /* 3. Borda translúcida */
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);   /* 4. Sombra profunda */
      border-radius: 20px;
      padding: 32px;
    }
 
    .card-vidro h3 {
      margin: 0 0 12px 0;
      color: #fff;
      font-size: 1.4rem;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }
 
    .card-vidro p {
      color: #cbd5e1;
      font-size: 0.95rem;
      line-height: 1.6;
      margin: 0 0 24px 0;
    }
 
    /* BARRA DE PARCEIROS COM FILTER: GRAYSCALE */
    .parceiros-box {
      display: flex;
      gap: 16px;
      align-items: center;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 16px;
    }
 
    .logo-parceiro {
      font-size: 0.85rem;
      font-weight: 700;
      color: #38bdf8;
      filter: grayscale(100%) opacity(0.6);
      transition: filter 0.3s ease;
      cursor: pointer;
    }
 
    .logo-parceiro:hover {
      filter: grayscale(0%) opacity(1); /* Ganha cor total no hover! */
    }
  </style>
</head>
<body>
  <!-- Elementos gráficos luminosos que serão desfocados pelo vidro -->
  <div class="esfera-fundo-1"></div>
  <div class="esfera-fundo-2"></div>
 
  <!-- O Cartão com Backdrop Filter -->
  <div class="card-vidro">
    <h3>⚡ Economaster Glass UI</h3>
    <p>
      Observe a textura translúcida de vidro fosco: as esferas coloridas de fundo são desfocadas pelo <code>backdrop-filter: blur(16px)</code>, enquanto esta tipografia permanece perfeitamente legível e nítida.
    </p>
 
    <div class="parceiros-box">
      <span style="font-size:0.75rem; color:#64748b;">Parceiros (Passe o mouse):</span>
      <span class="logo-parceiro">Chrome</span>
      <span class="logo-parceiro">Firefox</span>
      <span class="logo-parceiro">WebKit</span>
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste passar o mouse sobre os parceiros para ver o filter: grayscale se transformar, e altere o valor do desfoque no backdrop-filter para conferir a difusão da luz em tempo real:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

  • filter aplica pós-processamento de imagem no elemento e em todos os seus filhos.
  • filter: drop-shadow() projeta sombras respeitando a transparência real de ícones SVG e fotos PNG.
  • backdrop-filter aplica desfoque exclusivamente à área que está atrás da caixa, preservando a nitidez do texto.
  • O Glassmorphism autêntico exige 4 ingredientes: fundo RGBA semitransparente, backdrop-filter: blur(), borda translúcida fina e sombras multicamadas.
  • Sempre certifique-se de que o contraste das cores atenda ao piso de 4.5:1 da WCAG para evitar textos ilegíveis em vidros transparentes.

Próximo Passo: O CSS moderno evoluiu para além do que muitos imaginavam ser possível. E se você pudesse selecionar um elemento pai com base nos filhos que ele possui (o Santo Graal do seletor de pai :has()) ou criar componentes responsivos com base no tamanho do seu próprio contêiner em vez da janela com @container? Na Lição 47, desvendaremos os Seletores Modernos (:is, :where, :has & @container queries)!

O post Filtros e Glassmorphism Modernos no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/filtros-css-backdrop-filter-glassmorphism/feed/ 0 CSS Variables e Dark Mode Dinâmico no CSS | Web Academy https://webzoneware.com/web-academy/curso-css/css-variables-custom-properties-dark-mode/ https://webzoneware.com/web-academy/curso-css/css-variables-custom-properties-dark-mode/#respond Thu, 22 Oct 2026 03:47:07 +0000 https://webzoneware.com/?p=29469 Durante muitos anos, o gerenciamento de cores e medidas no CSS foi caótico. Se a sua empresa decidisse alterar o azul corporativo da marca, você era forçado a fazer um “localizar e substituir” em milhares de linhas de código, com o risco constante de esquecer elementos. As CSS Custom Properties, universalmente chamadas de CSS Variables, […]

O post CSS Variables e Dark Mode Dinâmico no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> Durante muitos anos, o gerenciamento de cores e medidas no CSS foi caótico. Se a sua empresa decidisse alterar o azul corporativo da marca, você era forçado a fazer um “localizar e substituir” em milhares de linhas de código, com o risco constante de esquecer elementos. As CSS Custom Properties, universalmente chamadas de CSS Variables, representaram o maior salto de engenharia de software da história do CSS. Ao contrário das variáveis antigas de pré-processadores como o Sass, as variáveis CSS vivem no DOM em tempo de execução, herdam pela cascata, reagem a media queries e podem ser manipuladas instantaneamente pelo JavaScript para alternar entre Modo Claro e Modo Escuro com zero recarregamento de página.

1. A Sintaxe: Declarando e Consumindo Variáveis

A declaração de uma variável CSS sempre inicia com dois traços (--), e o seu consumo é feito através da função var():

CSS3 13 linhas 
/* 1. DECLARAÇÃO GLOBAL NO :root */
:root {
  --cor-primaria: #38bdf8;
  --espacamento-padrao: 16px;
  --raio-borda: 10px;
}
 
/* 2. CONSUMO EM QUALQUER SELETOR */
.cartao {
  border: 1px solid var(--cor-primaria);
  padding: var(--espacamento-padrao);
  border-radius: var(--raio-borda);
}

Valores de Reserva (Fallbacks)

A função var() aceita um segundo parâmetro opcional como valor de segurança (fallback). Se a variável não estiver definida no escopo, o navegador adota o fallback automaticamente:

CSS3 9 linhas 
/* Se --cor-destaque não existir, usa #2563eb */
.btn {
  background-color: var(--cor-destaque, #2563eb);
}
 
/* Fallback encadeado em cascata */
.titulo {
  color: var(--cor-customizada, var(--cor-primaria, #0f172a));
}

2. Escopo Global vs. Escopo Local (A Cascata Viva)

O maior diferencial das CSS Variables sobre o Sass é que elas respeitam o escopo da árvore do DOM:

1. Escopo Global (:root)

O pseudo-elemento :root representa a raiz do documento (o elemento <html>), mas possui uma especificidade maior. Qualquer variável declarada no :root é herdada por absolutamente todos os elementos da página.

2. Escopo Local (Component-Level Overriding)

Você pode redefinir o valor de uma variável dentro de um contêiner específico. Apenas aquele contêiner e seus filhos passarão a enxergar o novo valor:

CSS3 16 linhas 
:root {
  --btn-bg: #2563eb; /* Azul padrão global */
}
 
/* Um banner de perigo reescreve a variável localmente */
.banner-alerta {
  --btn-bg: #ef4444; /* Vermelho apenas dentro do banner! */
  background: #450a0a;
  padding: 20px;
}
 
/* O botão consome --btn-bg: se estiver no site é azul, se estiver no banner é vermelho! */
.btn-acao {
  background-color: var(--btn-bg);
  color: #fff;
}

3. A Regra de Ouro dos Tokens Semânticos

Anti-padrão Fatal: Nunca nomeie suas variáveis com nomes de cores físicas (como --azul, --verde ou --cinza-escuro). Quando você criar o Modo Escuro, o seu “azul” ou “branco” precisará virar cinza escuro ou preto, tornando seu código confuso e ilegível!

Use sempre Design Tokens Semânticos baseados na função visual do elemento:

CSS3 10 linhas 
/* SISTEMA PROFISSIONAL DE DESIGN TOKENS */
:root {
  --bg-pagina:          #ffffff;
  --bg-superficie:      #f8fafc;
  --bg-card:            #ffffff;
  --texto-primario:     #0f172a;
  --texto-secundario:   #64748b;
  --borda-suave:        #e2e8f0;
  --cor-marca:          #2563eb;
}

4. Arquitetura Definitiva de Dark Mode

Para criar um sistema de tema escuro de classe mundial, combinamos a detecção automática do sistema operacional com a capacidade de o usuário forçar o tema manualmente através de um atributo data-theme:

CSS3 37 linhas 
/* 1. TEMA CLARO PADRÃO */
:root {
  --bg-pagina:        #f8fafc;
  --bg-card:          #ffffff;
  --texto-corpo:      #0f172a;
  --borda:            #cbd5e1;
  --destaque:         #2563eb;
}
 
/* 2. MODO ESCURO AUTOMÁTICO (PREFERÊNCIA DO SISTEMA OPERACIONAL) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-pagina:      #0b0f19;
    --bg-card:        #1e293b;
    --texto-corpo:    #f8fafc;
    --borda:          #334155;
    --destaque:       #38bdf8;
  }
}
 
/* 3. MODO ESCURO FORÇADO VIA JAVASCRIPT (DATA-THEME="DARK") */
[data-theme="dark"] {
  --bg-pagina:        #0b0f19;
  --bg-card:          #1e293b;
  --texto-corpo:      #f8fafc;
  --borda:          #334155;
  --destaque:         #38bdf8;
}
 
/* 4. MODO CLARO FORÇADO VIA JAVASCRIPT (DATA-THEME="LIGHT") */
[data-theme="light"] {
  --bg-pagina:        #f8fafc;
  --bg-card:          #ffffff;
  --texto-corpo:      #0f172a;
  --borda:            #cbd5e1;
  --destaque:         #2563eb;
}

5. Reatividade em Tempo Real com JavaScript

Como as CSS Variables vivem no DOM computado, você pode manipulá-las diretamente pelo JavaScript sem precisar recalcular regras de classe:

JavaScript 5 linhas 
// Altera uma variável global instantaneamente:
document.documentElement.style.setProperty('--destaque', '#10b981');
 
// Lê o valor computado de uma variável:
const corAtual = getComputedStyle(document.documentElement).getPropertyValue('--destaque');

6. Laboratório Prático: Switcher de Dark Mode Completo

No código interativo abaixo, construímos um componente de dashboard que consome tokens semânticos e alterna dinamicamente entre Tema Claro e Tema Escuro ao clique de um botão:

HTML5 106 linhas 
<!DOCTYPE html>
<html lang="pt-BR" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de CSS Variables e Dark Mode</title>
  <style>
    /* TOKENS SEMÂNTICOS NO ESCOPO RAIZ */
    :root, [data-theme="dark"] {
      --bg: #0b0f19;
      --card-bg: #1e293b;
      --texto: #f8fafc;
      --texto-mutado: #94a3b8;
      --borda: #334155;
      --primaria: #38bdf8;
      --btn-texto: #0b0f19;
    }
 
    [data-theme="light"] {
      --bg: #f1f5f9;
      --card-bg: #ffffff;
      --texto: #0f172a;
      --texto-mutado: #64748b;
      --borda: #cbd5e1;
      --primaria: #2563eb;
      --btn-texto: #ffffff;
    }
 
    body {
      background-color: var(--bg);
      color: var(--texto);
      font-family: 'Inter', system-ui, sans-serif;
      padding: 40px;
      margin: 0;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
 
    .painel-container {
      max-width: 480px;
      background-color: var(--card-bg);
      border: 1px solid var(--borda);
      border-radius: 14px;
      padding: 24px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
 
    .cabecalho-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
 
    h3 { margin: 0; color: var(--primaria); font-size: 1.2rem; }
 
    p {
      color: var(--texto-mutado);
      font-size: 0.9rem;
      line-height: 1.6;
      margin: 0 0 20px 0;
    }
 
    /* Botão que troca o tema via JavaScript */
    .btn-toggle-tema {
      background-color: var(--primaria);
      color: var(--btn-texto);
      border: none;
      padding: 10px 16px;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform 0.2s ease;
    }
 
    .btn-toggle-tema:active {
      transform: scale(0.96);
    }
  </style>
</head>
<body>
  <div class="painel-container">
    <div class="cabecalho-card">
      <h3>⚡ Web-ZoneWare Theme</h3>
      <button class="btn-toggle-tema" onclick="alternarTema()">
        🌓 Alternar Tema
      </button>
    </div>
 
    <p>
      Este cartão consome exclusivamente variáveis CSS semânticas (<code>--bg</code>, <code>--card-bg</code>, <code>--primaria</code>). Clique no botão acima para alternar entre Dark e Light Mode em tempo real!
    </p>
  </div>
 
  <script>
    function alternarTema() {
      const html = document.documentElement;
      const temaAtual = html.getAttribute('data-theme');
      const novoTema = (temaAtual === 'dark') ? 'light' : 'dark';
      html.setAttribute('data-theme', novoTema);
    }
  </script>
</body>
</html>

Abra este laboratório no Playground IDE e teste clicar no botão de alternância para ver todas as cores do cartão e do fundo se transformarem suavemente sem recarregar a página:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

  • CSS Variables (Custom Properties) são declaradas com --nome e consumidas com var(--nome, fallback).
  • Vivem na árvore do DOM em tempo de execução, respeitam o escopo da cascata e herdam valores de pais para filhos.
  • Declare tokens globais no :root e use tokens semânticos funcionais (como --bg-card) em vez de nomes físicos de cores.
  • A fusão de @media (prefers-color-scheme) com [data-theme] cria sistemas de Dark Mode elegantes e controláveis pelo usuário.
  • O JavaScript pode ler e atualizar variáveis CSS dinamicamente através de setProperty().

Próximo Passo: Agora que você domina as variáveis e o Dark Mode, como criar aquela estética translúcida futurista de vidro fosco (Glassmorphism) com desfoque de fundo e filtros visuais? Na Lição 46, mergulharemos em Filtros & Glassmorphism no CSS (filter e backdrop-filter)!

O post CSS Variables e Dark Mode Dinâmico no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/css-variables-custom-properties-dark-mode/feed/ 0 Animações Profissionais com @keyframes no CSS | Web Academy https://webzoneware.com/web-academy/curso-css/animacoes-keyframes-css/ https://webzoneware.com/web-academy/curso-css/animacoes-keyframes-css/#respond Thu, 22 Oct 2026 03:42:26 +0000 https://webzoneware.com/?p=29467 Na lição anterior, você aprendeu que as transições são perfeitas para suavizar a passagem entre dois estados quando o usuário interage com a página. No entanto, muitas interfaces exigem experiências cinematográficas contínuas: indicadores de carregamento que giram sem parar, notificações que entram suavemente na tela assim que o documento abre, ou ilustrações que flutuam em […]

O post Animações Profissionais com @keyframes no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> Na lição anterior, você aprendeu que as transições são perfeitas para suavizar a passagem entre dois estados quando o usuário interage com a página. No entanto, muitas interfaces exigem experiências cinematográficas contínuas: indicadores de carregamento que giram sem parar, notificações que entram suavemente na tela assim que o documento abre, ou ilustrações que flutuam em ciclos infinitos de respiração. Para coreografar múltiplos estágios temporais sem depender de ações do mouse, o CSS nos entrega o poderoso motor de @keyframes e a propriedade animation.

1. A Linha do Tempo: Criando Regras com @keyframes

Uma animação em CSS é dividida em duas partes: a linha do tempo (Timeline), declarada com a regra-arroba @keyframes, e a aplicação da animação, configurada no seletor do elemento.

CSS3 20 linhas 
/* 1. DEFINIÇÃO DA LINHA DO TEMPO */
@keyframes pulsarBrilho {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}
 
/* 2. APLICAÇÃO NO ELEMENTO */
.badge-alerta {
  animation: pulsarBrilho 2s ease-in-out infinite;
}

Você pode usar as palavras-chave from (equivalente a 0%) e to (equivalente a 100%) para animações simples, ou declarar quantos marcos percentuais intermediários desejar (0%, 25%, 60%, 100%) para coreografias ricas.

2. As 8 Subpropriedades do animation

A propriedade abreviada animation encapsula 8 controles cirúrgicos:

Propriedade Valores Principais Função na Animação
animation-name Nome da regra @keyframes Conecta o elemento à sua linha do tempo.
animation-duration Tempo (ex.: 1.5s, 400ms) Duração de exatamente 1 ciclo da animação.
animation-timing-function ease, linear, cubic-bezier, steps() Curva de aceleração do movimento.
animation-delay Tempo positivo ou negativo (ex.: -0.5s) Tempo de espera antes do início do primeiro ciclo.
animation-iteration-count Número inteiro ou infinite Quantas vezes a animação repetirá o ciclo.
animation-direction normal, reverse, alternate alternate cria o efeito de ping-pong (vai e volta suavemente).
animation-fill-mode none, forwards, backwards, both Controla como os estilos persistem antes e após a execução.
animation-play-state running, paused Permite pausar ou retomar a animação (ex.: no :hover).

3. animation-fill-mode: O Fim dos Saltos Bruscos

O maior pesadelo dos iniciantes é animar um card surgindo de baixo para cima com fade-in: a animação roda lindamente e, no instante em que chega a 100%, o card desaparece ou salta bruscamente de volta para o estado inicial!

Isso acontece porque, por padrão (animation-fill-mode: none), o navegador descarta todos os estilos do @keyframes assim que a animação termina.

A Solução Definitiva com forwards e both:

  • forwards: Ordena ao navegador que mantenha permanentemente os estilos do último frame (100%) na tela após o término. O elemento nunca mais salta de volta!
  • backwards: Aplica os estilos do primeiro frame (0%) durante o período do animation-delay (evita que o elemento apareça antes da hora).
  • both: O padrão ouro! Aplica tanto forwards quanto backwards, garantindo entradas de tela impecáveis.
CSS3 15 linhas 
/* Animação de Entrada Perfeita e Sem Saltos */
.card-entrada {
  animation: deslizarParaCima 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
 
@keyframes deslizarParaCima {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

4. Pausando Loops no Hover: animation-play-state

Se você tem uma fita de marcas correndo na tela (marquee infinito) ou um disco girando, o usuário pode querer pausar a animação para ler com calma ao passar o mouse:

CSS3 7 linhas 
.disco-giratorio {
  animation: girar 8s linear infinite;
}
 
.disco-giratorio:hover {
  animation-play-state: paused; /* Congela o giro exatamente no frame atual! */
}

5. Animações em Degraus com steps(): O Efeito Máquina de Escrever

Em vez de uma transição fluida e suave, a função steps(n) quebra a interpolação em um número fixo de “degraus” discretos. É a base para animar spritesheets de jogos retrô e criar o efeito de digitação mecânica (Typewriter):

CSS3 11 linhas 
.texto-maquina {
  overflow: hidden;
  white-space: nowrap;
  width: 22ch; /* Largura exata de 22 caracteres */
  animation: digitar 3s steps(22) infinite alternate;
}
 
@keyframes digitar {
  from { width: 0; }
  to { width: 22ch; }
}

6. Acessibilidade e Performance Gráfica (WCAG 2.2)

Blindagem de Performance e Saúde:

  • Performance: Anime preferencialmente transform e opacity. Evite animar width, height, top ou margin em loops infinitos, sob pena de travar a CPU e descarregar baterias de celulares.
  • Acessibilidade: Elementos piscantes ou que se movem continuamente podem desencadear convulsões ou tonturas severas. É obrigatório incluir:
    CSS3 6 linhas 
    @media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

7. Laboratório Prático: 3 Animações de Produção em Ação

No código interativo abaixo, construímos três animações do mundo real: um Spinner de Carregamento Infinito, um Efeito Máquina de Escrever com Cursor Piscante e um Card com Entrada Suave (Fade & Slide) usando animation-fill-mode: both:

HTML5 113 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Animações @keyframes CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 40px;
      margin: 0;
    }
 
    .painel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 24px;
    }
 
    .card-animacao {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      text-align: center;
    }
 
    /* 1. SPINNER DE CARREGAMENTO (LOOP INFINITO) */
    .spinner-radar {
      width: 48px;
      height: 48px;
      border: 4px solid #334155;
      border-top-color: #38bdf8;
      border-radius: 50%;
      animation: girar 1s linear infinite;
    }
 
    @keyframes girar {
      to { transform: rotate(360deg); }
    }
 
    /* 2. EFEITO TYPEWRITER COM STEPS() */
    .typewriter-box {
      display: inline-block;
      font-family: monospace;
      font-size: 1.1rem;
      color: #10b981;
      white-space: nowrap;
      overflow: hidden;
      border-right: 3px solid #10b981;
      width: 17ch; /* 17 caracteres */
      animation: 
        escrever 3.5s steps(17) infinite alternate,
        piscarCursor 0.7s step-end infinite;
    }
 
    @keyframes escrever {
      from { width: 0; }
      to { width: 17ch; }
    }
 
    @keyframes piscarCursor {
      50% { border-color: transparent; }
    }
 
    /* 3. CARD COM ENTRADA CINEMATOGRÁFICA (FILL-MODE: BOTH) */
    .card-entrada-suave {
      animation: surgirComFade 1s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
 
    @keyframes surgirComFade {
      0% {
        opacity: 0;
        transform: translateY(24px) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
  </style>
</head>
<body>
  <h2 style="color:#f1f5f9; margin-top:0;">Animações Avançadas com @keyframes</h2>
  <p style="color:#94a3b8; font-size:0.9rem;">
    Observe três cenários de produção controlados exclusivamente pelo motor gráfico do CSS:
  </p>
 
  <div class="painel-grid">
    <div class="card-animacao">
      <div class="spinner-radar"></div>
      <p style="margin:16px 0 0 0; color:#94a3b8; font-size:0.85rem;">Spinner Infinito (linear infinite)</p>
    </div>
 
    <div class="card-animacao">
      <div class="typewriter-box">Web-ZoneWare 2026</div>
      <p style="margin:16px 0 0 0; color:#94a3b8; font-size:0.85rem;">Typewriter com <code>steps()</code></p>
    </div>
 
    <div class="card-animacao card-entrada-suave">
      <h4 style="margin:0 0 8px 0; color:#38bdf8;">Entrada Blindada</h4>
      <p style="margin:0; font-size:0.85rem; color:#94a3b8;">Retém o estado com <code>animation-fill-mode: both</code></p>
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste alterar a curva de aceleração ou a direção da animação para alternate para comprovar a versatilidade do @keyframes:

⚡ Abrir no Playground IDE →

8. Resumo e Próximos Passos

  • @keyframes define uma linha do tempo autônoma através de porcentagens (0% a 100%).
  • A propriedade animation conecta o elemento à timeline e dita duração, repetições e velocidade.
  • animation-fill-mode: forwards ou both impede que a animação sofra saltos bruscos ao terminar.
  • animation-direction: alternate cria loops suaves de ida e volta (ping-pong).
  • A função steps() divide a interpolação em degraus rígidos, ideal para sprites e efeitos de digitação.
  • Priorize animar transform e opacity para manter 60fps acelerados pela placa de vídeo.

Próximo Passo: Como organizar paletas de cores globais, alternar entre Modo Claro e Escuro dinamicamente e evitar valores mágicos repetidos no CSS? Na Lição 45, desvendaremos as CSS Variables (Custom Properties) & Dark Mode Dinâmico!

O post Animações Profissionais com @keyframes no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/animacoes-keyframes-css/feed/ 0 Transições Suaves no CSS com transition | Web Academy https://webzoneware.com/web-academy/curso-css/transicoes-css-suaves-animadas/ https://webzoneware.com/web-academy/curso-css/transicoes-css-suaves-animadas/#respond Thu, 22 Oct 2026 03:38:47 +0000 https://webzoneware.com/?p=29465 A diferença entre um website amador e uma aplicação digital de alto padrão estético reside nas micro-interações. Sem transições, quando o usuário passa o mouse sobre um botão, as cores e elevações mudam em zero milissegundos — um corte seco, robótico e visualmente agressivo. A propriedade transition ensina o motor do navegador a interpolar matematicamente […]

O post Transições Suaves no CSS com transition | Web Academy apareceu primeiro em Web-Zoneware.

]]> A diferença entre um website amador e uma aplicação digital de alto padrão estético reside nas micro-interações. Sem transições, quando o usuário passa o mouse sobre um botão, as cores e elevações mudam em zero milissegundos — um corte seco, robótico e visualmente agressivo. A propriedade transition ensina o motor do navegador a interpolar matematicamente a passagem suave entre o estado inicial e o estado final de um elemento. Nesta lição, você dominará as 4 subpropriedades de transição, aprenderá por que deve fugir do transition: all e descobrirá como usar curvas cubic-bezier para criar efeitos de mola elástica cinematográficos.

1. A Anatomia da Propriedade transition

Uma transição suave completa é composta por quatro parâmetros fundamentais:

CSS3 4 linhas 
/* Sintaxe Geral: transition: [propriedade] [duração] [curva-de-velocidade] [atraso]; */
.botao {
  transition: transform 0.3s ease 0s;
}

1. transition-property — O que Animar?

Define exatamente quais propriedades de estilo serão interpoladas suavemente.

O Perigo Mortal do transition: all: Declarar transition: all 0.3s é um dos maiores anti-padrões de CSS. Ao instruir o navegador a animar “tudo”, qualquer mudança acidental de padding, font-size ou margin forçará a CPU a recalcular o layout da página inteira (Reflow). Sempre liste as propriedades específicas (ex.: transition: transform 0.2s, background-color 0.2s;).

2. transition-duration — O Tempo de Resposta

O tempo total da transição, expresso em segundos (0.3s) ou milissegundos (300ms).

  • Zona Ideal de Micro-interações (150ms a 350ms): É rápida o suficiente para parecer instantânea e suave o bastante para ser percebida pelo cérebro humano.
  • Acima de 500ms: O site começa a parecer pesado, lerdo e cansativo para o usuário.

3. transition-timing-function — A Física da Velocidade

Dita a curva de aceleração do movimento, simulando as leis de inércia da física real.

4. transition-delay — O Tempo de Espera

Define quanto tempo o navegador deve aguardar antes de iniciar a transição. Excelente para criar cascatas de itens em listas (staggered animations).

2. A Física das Curvas de Velocidade (Timing Functions)

A forma como um objeto acelera e desacelera comunica peso e personalidade à interface:

Função Comportamento Físico Sensação Visual
linear Velocidade estritamente constante do início ao fim. Robótica, mecânica, artificial.
ease (Padrão) Começa lento, acelera no meio e desacelera no final. Suave e natural para a maioria dos casos.
ease-out Começa rápido e desacelera suavemente no final. A melhor opção para interações: reage instantaneamente ao usuário!
ease-in Começa muito lento e acelera no final. Excelente para elementos saindo da tela.
ease-in-out Aceleração e desaceleração simétricas. Ótimo para modais e rotações completas.

3. O Superpoder do cubic-bezier: O Efeito Mola (Spring)

Todas as funções acima são apenas atalhos pré-configurados de uma Curva de Bézier Cúbica composta por 4 coordenadas matemáticas: cubic-bezier(P1x, P1y, P2x, P2y).

A mágica acontece quando usamos um valor no eixo Y maior do que 1: o elemento ultrapassa seu destino final e “rebota” elasticamente de volta, simulando uma mola mecânica sem precisar de bibliotecas pesadas de animação em JavaScript:

CSS3 8 linhas 
/* Curva de Rebote Elástico Snappy / Bouncy */
.card-elastico {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
 
.card-elastico:hover {
  transform: translateY(-10px) scale(1.03); /* Dá um leve "pulo" elástico! */
}

4. Onde Declarar a Transição? A Regra da Ida e da Volta

A Pegadinha Mais Comum do CSS: Se você declarar o transition dentro do bloco :hover, a animação funcionará suavemente quando o mouse ENTRAR no elemento, mas ao tirar o cursor, a transição é cancelada e o elemento volta em um corte seco instantâneo! Declare sempre o transition na classe base do elemento para garantir que a ida e a volta sejam 100% fluidas.

CSS3 12 linhas 
/* FORMA CORRETA: No estado base */
.botao-perfeito {
  background-color: #2563eb;
  transform: translateY(0);
  /* A transição mora aqui, garantindo suavidade na ida E na volta: */
  transition: transform 0.25s ease-out, background-color 0.2s ease;
}
 
.botao-perfeito:hover {
  background-color: #1d4ed8;
  transform: translateY(-4px);
}

5. Múltiplas Transições Independentes

Você pode atribuir tempos e acelerações diferentes para cada propriedade, separando-as por vírgula em uma única regra:

CSS3 7 linhas 
.cartao-vip {
  /* O movimento dura 300ms com mola; a sombra muda mais rápido em 150ms */
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.15s ease-out,
    border-color 0.2s linear;
}

6. Acessibilidade Vestibular (WCAG 2.2)

Transições com movimento de escala ou translação devem respeitar as preferências de acessibilidade de pessoas com labirintite:

CSS3 5 linhas 
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

7. Laboratório Prático: Comparando Curvas e o Efeito Mola

No código interativo abaixo, experimente passar o cursor do mouse sobre cada um dos 3 botões para sentir visualmente a diferença entre a falta de transição, a transição ease tradicional e o efeito mola com cubic-bezier:

HTML5 72 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Transições CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 40px;
      margin: 0;
    }
 
    .painel-botoes {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 24px;
    }
 
    .btn-teste {
      background: #1e293b;
      color: #fff;
      border: 1px solid #334155;
      padding: 16px 28px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
    }
 
    /* 1. SEM TRANSIÇÃO (CORTE SECO) */
    .btn-sem-transicao:hover {
      background: #ef4444;
      transform: translateY(-8px);
    }
 
    /* 2. TRANSIÇÃO PADRÃO (EASE) */
    .btn-ease {
      transition: transform 0.25s ease, background 0.25s ease;
    }
 
    .btn-ease:hover {
      background: #3b82f6;
      transform: translateY(-8px);
    }
 
    /* 3. EFEITO MOLA ELÁSTICA (CUBIC-BEZIER) */
    .btn-mola {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
    }
 
    .btn-mola:hover {
      background: #10b981;
      transform: translateY(-8px) scale(1.05);
    }
  </style>
</head>
<body>
  <h2 style="color:#f1f5f9; margin-top:0;">A Física das Transições Suaves no CSS</h2>
  <p style="color:#94a3b8; font-size:0.9rem;">
    Passe o mouse sobre os 3 botões e observe a diferença física de percepção e acabamento de cada um:
  </p>
 
  <div class="painel-botoes">
    <button class="btn-teste btn-sem-transicao">1. Sem Transição (Seco)</button>
    <button class="btn-teste btn-ease">2. Transição ease (Padrão)</button>
    <button class="btn-teste btn-mola">3. Mola cubic-bezier (Snappy)</button>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste alterar as coordenadas da curva cubic-bezier para criar seus próprios efeitos de aceleração física:

⚡ Abrir no Playground IDE →

8. Resumo e Próximos Passos

  • transition interpola suavemente a transição numérica entre dois estados disparados por interações.
  • Evite transition: all para blindar sua página contra quedas de quadros de layout (Reflows); especifique sempre propriedades como transform e opacity.
  • Durações entre 150ms e 350ms são o padrão ouro da ergonomia de interfaces modernas.
  • Declare o transition no estado base do elemento para garantir suavidade na entrada e na saída do hover.
  • Curvas cubic-bezier com valores de Y maiores que 1 simulam o efeito de rebote elástico (spring) com extrema elegância e performance nativa.

Próximo Passo: As transições conectam dois estados com base na ação do usuário. Mas e quando queremos uma animação cinematográfica contínua, com dezenas de etapas intermediárias, repetição infinita e sem depender de cliques ou hovers? Na Lição 44, dominaremos as Animações com @keyframes no CSS!

O post Transições Suaves no CSS com transition | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/transicoes-css-suaves-animadas/feed/ 0 Transformações 2D e 3D Modernas no CSS | Web Academy https://webzoneware.com/web-academy/curso-css/transformacoes-css-translate-rotate-scale/ https://webzoneware.com/web-academy/curso-css/transformacoes-css-translate-rotate-scale/#respond Thu, 22 Oct 2026 03:34:39 +0000 https://webzoneware.com/?p=29463 Até este ponto da sua jornada, os elementos da tela viveram confinados em caixas estáticas retangulares. Mas o CSS moderno possui um verdadeiro motor de computação gráfica: o módulo de Transformações (CSS Transforms). Com ele, você pode transladar, rotacionar, redimensionar, inclinar e até projetar elementos na terceira dimensão (Eixo Z). E o aspecto mais impressionante: […]

O post Transformações 2D e 3D Modernas no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> Até este ponto da sua jornada, os elementos da tela viveram confinados em caixas estáticas retangulares. Mas o CSS moderno possui um verdadeiro motor de computação gráfica: o módulo de Transformações (CSS Transforms). Com ele, você pode transladar, rotacionar, redimensionar, inclinar e até projetar elementos na terceira dimensão (Eixo Z). E o aspecto mais impressionante: diferente das velhas alterações de coordenadas, as transformações são processadas diretamente na placa de vídeo (GPU), garantindo experiências visuais fluidas a 60 ou 120 quadros por segundo sem engasgos.

1. A Pipeline Gráfica: Por que a GPU Transforma Tudo?

Para compreender a supremacia das transformações, precisamos analisar o que o navegador faz internamente quando um elemento se move na tela:

  • Movimentação Antiga (com top, left ou margin): Força a CPU a recalcular a geometria física de todos os elementos da página (etapa de Layout/Reflow) e redesenhar cada pixel na tela (Repaint). Em celulares ou páginas complexas, isso causa engasgos visuais graves (jank).
  • Movimentação Moderna (com transform): O elemento é isolado em sua própria camada de vídeo (Composite Layer) e manipulado diretamente pela GPU (Placa Gráfica). O navegador não recalcula o layout nem repinta os vizinhos: ele apenas move a imagem da camada com aceleração por hardware!

Regra de Alta Performance: Toda vez que você for mover um elemento (em um hover, modal ou animação), NUNCA anime top ou left. Use sempre transform: translate()!

2. As 4 Transformações 2D Fundamentais

A propriedade transform aceita uma ou mais funções geométricas aplicadas no plano bidimensional (X e Y):

1. translate(x, y) — Deslocamento sem Perturbar Vizinhos

Move o elemento nos eixos horizontal e vertical. O espaço original da caixa permanece 100% preservado no fluxo normal:

CSS3 3 linhas 
.card:hover {
  transform: translateY(-8px); /* Eleva o card 8px para cima com aceleração GPU */
}

O Truque Histórico da Centralização: Valores percentuais em translate() calculam em relação ao tamanho do próprio elemento (e não do pai!). Por isso, a combinação clássica centraliza qualquer elemento com perfeição milimétrica:

CSS3 6 linhas 
.modal-centralizado {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Recua exatamente metade da sua própria largura e altura */
}

2. scale(x, y) — Escala e Zoom Suave

Aumenta ou diminui o elemento visualmente. O valor 1 representa 100% (tamanho natural):

CSS3 3 linhas 
.btn-cta:hover {
  transform: scale(1.05); /* Amplia o botão em 5% sem alterar o layout da página */
}

3. rotate(ângulo) — Rotação Angular

Gira o elemento em torno de seu eixo. Aceita graus (deg) ou voltas (turn):

CSS3 4 linhas 
.icone-engrenagem {
  transform: rotate(45deg);   /* Gira 45 graus no sentido horário */
  /* transform: rotate(0.5turn); Gira meia volta (180 graus) */
}

4. skew(x, y) — Inclinação Paralela

Distorce as faces do elemento em ângulos diagonais, criando o efeito de paralelogramo:

CSS3 3 linhas 
.faixa-diagonal {
  transform: skewX(-12deg); /* Cria bordas esportivas inclinadas */
}

3. O Ponto de Ancoragem: transform-origin

Por padrão, toda transformação acontece a partir do centro geométrico do elemento (50% 50%). A propriedade transform-origin permite alterar esse pivô de ancoragem:

CSS3 5 linhas 
.ponteiro-relogio {
  /* Gira a partir da base inferior central, como o ponteiro de um relógio real */
  transform-origin: center bottom;
  transform: rotate(90deg);
}

4. Entrando na Terceira Dimensão (3D Transforms)

Telas de computador e celulares são superfícies bidimensionais estritamente planas. Para que o cérebro humano perceba profundidade em 3D, precisamos aplicar a propriedade perspective no contêiner pai:

CSS3 3 linhas 
.cena-3d {
  perspective: 1000px; /* Define a distância do olho do usuário até a tela */
}

A Tríade Sagrada do Efeito Card Flip 3D

Para criar o famoso efeito de virar um cartão em 180 graus revelando o verso, usamos três propriedades essenciais:

  1. perspective no pai: Cria o campo de visão tridimensional realista.
  2. transform-style: preserve-3d no cartão: Garante que as faces frontal e traseira coexistam no espaço 3D real, em vez de serem achatadas pelo navegador.
  3. backface-visibility: hidden nas faces: Informa ao motor gráfico para ocultar o verso de uma face quando ela estiver de costas para os olhos do usuário!

5. Novidade Moderna: Propriedades Individuais de Transformação

A especificação CSS Transforms Level 2 introduziu propriedades independentes para que você não precise mais reescrever a longa cadeia de transform:

CSS3 6 linhas 
/* Sintaxe Moderna Independente (Navegadores Modernos) */
.card-moderno:hover {
  translate: 0 -8px;  /* Equivalente a transform: translateY(-8px) */
  scale: 1.03;        /* Equivalente a transform: scale(1.03) */
  rotate: 2deg;       /* Equivalente a transform: rotate(2deg) */
}

6. Laboratório Prático: O Espetacular Card Flip 3D

No código interativo abaixo, construímos um cartão de curso tridimensional. Ao passar o mouse sobre ele, o cartão gira 180 graus no Eixo Y, ocultando a frente e revelando a ementa de estudos no verso com aceleração por hardware perfeita:

HTML5 111 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Transformações 3D CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
    }
 
    /* 1. O CONTÊINER COM PERSPECTIVA 3D */
    .cena-card {
      width: 320px;
      height: 400px;
      perspective: 1000px; /* Profundidade de câmera */
      margin-top: 20px;
    }
 
    /* 2. O CARTÃO QUE GIRA */
    .card-3d {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d; /* Preserva o espaço tridimensional dos filhos */
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
    }
 
    .cena-card:hover .card-3d {
      transform: rotateY(180deg); /* Gira 180 graus na horizontal */
    }
 
    /* 3. AS FACES (FRENTE E VERSO) */
    .card-face {
      position: absolute;
      inset: 0;
      border-radius: 16px;
      padding: 28px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      backface-visibility: hidden; /* OCULTA O VERSO QUANDO DE COSTAS! */
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      border: 1px solid #334155;
    }
 
    /* FACE FRONTAL */
    .face-frente {
      background: linear-gradient(135deg, #1e293b, #0f172a);
      border-color: #38bdf8;
    }
 
    .face-frente h3 { margin: 0 0 10px 0; color: #38bdf8; font-size: 1.4rem; }
    .face-frente p { color: #94a3b8; font-size: 0.9rem; line-height: 1.5; }
 
    /* FACE TRASEIRA */
    .face-verso {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      transform: rotateY(180deg); /* Já nasce virada de costas */
      text-align: center;
      align-items: center;
    }
 
    .face-verso h3 { margin: 0 0 12px 0; color: #fff; }
    .face-verso p { color: #bfdbfe; font-size: 0.85rem; margin-bottom: 20px; }
 
    .btn-matricular {
      background: #fff;
      color: #1d4ed8;
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2 style="color:#f1f5f9; margin-top:0;">Card Flip 3D com Aceleração por GPU</h2>
  <p style="color:#94a3b8; font-size:0.9rem;">
    Passe o cursor sobre o cartão para testemunhar o giro tridimensional em 180 graus com <code>rotateY</code>:
  </p>
 
  <div class="cena-card">
    <div class="card-3d">
      <!-- Frente do Cartão -->
      <div class="card-face face-frente">
        <span style="font-size:0.75rem; font-weight:700; color:#38bdf8; text-transform:uppercase;">Módulo 05</span>
        <h3>CSS3 Avançado</h3>
        <p>Transformações espaciais 2D e 3D aceleradas pela placa gráfica. Passe o mouse para ver o verso!</p>
        <span style="margin-top:auto; font-size:0.8rem; color:#64748b;">🔄 Passe o mouse para girar</span>
      </div>
 
      <!-- Verso do Cartão -->
      <div class="card-face face-verso">
        <h3>Ementa Completa</h3>
        <p>✓ Animações com keyframes<br>✓ Transições suaves<br>✓ CSS Variables e Dark Mode</p>
        <button class="btn-matricular">Iniciar Lição 43 →</button>
      </div>
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e experimente alterar o valor de perspective: 1000px para 200px ou 3000px para perceber como a profundidade visual da cena 3D se transforma:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

  • transform opera na camada Composite da GPU, mantendo 60fps sem provocar recálculos de Layout (Reflow).
  • translate(x, y) move elementos sem perturbar a geometria dos vizinhos.
  • scale() e rotate() redimensionam e giram a caixa com aceleração gráfica.
  • transform-origin define o ponto pivô de ancoragem da transformação.
  • As propriedades individuais modernas (translate, rotate, scale) eliminam a necessidade de encadeamentos longos.
  • Efeitos 3D realistas dependem de perspective no contêiner pai, transform-style: preserve-3d no elemento rotativo e backface-visibility: hidden nas faces.

Próximo Passo: Agora que você sabe mover e transformar elementos no espaço, como fazer essas mudanças acontecerem de forma suave, natural e cinematográfica, sem saltos bruscos? Na Lição 43, dominaremos as Transições Suaves no CSS (transition, timing-functions e cubic-bezier)!

O post Transformações 2D e 3D Modernas no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/transformacoes-css-translate-rotate-scale/feed/ 0 Pseudo-elementos no CSS: ::before e ::after | Web Academy https://webzoneware.com/web-academy/curso-css/pseudo-elementos-before-after/ https://webzoneware.com/web-academy/curso-css/pseudo-elementos-before-after/#respond Thu, 22 Oct 2026 03:30:34 +0000 https://webzoneware.com/?p=29461 Uma das marcas distintivas de um desenvolvedor front-end de alto nível é a capacidade de manter o código HTML 100% semântico e enxuto. No passado, para criar uma fita de destaque em um cartão, um sublinhado elegante que se expande ao passar o mouse ou uma bolinha verde pulsante de status, desenvolvedores enchiam o documento […]

O post Pseudo-elementos no CSS: ::before e ::after | Web Academy apareceu primeiro em Web-Zoneware.

]]> Uma das marcas distintivas de um desenvolvedor front-end de alto nível é a capacidade de manter o código HTML 100% semântico e enxuto. No passado, para criar uma fita de destaque em um cartão, um sublinhado elegante que se expande ao passar o mouse ou uma bolinha verde pulsante de status, desenvolvedores enchiam o documento de tags vazias como <span class="circulo"></span>. Os Pseudo-elementos (identificados pelo duplo dois-pontos ::) revolucionaram esse cenário: eles criam elementos visuais virtuais diretamente na árvore de renderização do CSS, sem poluir uma única linha do seu HTML!

1. A Sintaxe Padronizada: Por que Dois Dois-Pontos (::)?

Nas especificações antigas de CSS1 e CSS2, tanto pseudo-classes quanto pseudo-elementos usavam um único caractere :.

A partir do CSS3, a W3C estabeleceu uma fronteira conceitual definitiva:

  • Pseudo-classe (: com um dois-pontos): Mira um estado dinâmico do elemento real (ex.: :hover, :focus, :checked).
  • Pseudo-elemento (:: com dois dois-pontos): Cria um elemento visual virtual ou estiliza uma subparte interna (ex.: ::before, ::after, ::marker, ::selection).

Dica de Boas Práticas: Os navegadores modernos ainda aceitam a sintaxe antiga de um ponto (:before) por razões de retrocompatibilidade com a década de 1990. No entanto, em código moderno profissional e acessível, use SEMPRE o padrão moderno de dois dois-pontos (::before e ::after).

2. Onde Nascem ::before e ::after?

Um dos equívocos mais comuns entre iniciantes é acreditar que ::before fica localizado do lado de fora, antes da tag, e que ::after fica do lado de fora, depois da tag. Isso é falso!

No modelo de renderização do navegador, os pseudo-elementos são inseridos INTERNAMENTE dentro do elemento selecionado:

  • ::before: É renderizado como o primeiríssimo filho interno da caixa, logo antes do texto ou de qualquer outro elemento filho.
  • ::after: É renderizado como o último filho interno da caixa, logo após todo o conteúdo do elemento.

Atenção aos Elementos Vazios (Void Elements): Como ::before e ::after são filhos internos, eles NÃO FUNCIONAM em tags HTML auto-fechadas que não aceitam conteúdo filho no DOM, como <img>, <input>, <br> e <hr>!

3. A Regra de Ouro: A Propriedade content

Existe uma lei inegociável para ::before e ::after: sem a propriedade content, o pseudo-elemento simplesmente NÃO EXISTE e o navegador não desenha absolutamente nada na tela!

Mesmo que você queira criar um quadrado geométrico ou uma linha colorida sem nenhum texto dentro, você deve declarar content: ""; (aspas vazias):

CSS3 10 linhas 
/* Cria um indicador visual de status verde antes do texto */
.status-online::before {
  content: "";            /* OBRIGATÓRIO: Sem isso, o elemento não nasce! */
  display: inline-block;  /* Por padrão, pseudo-elementos são inline */
  width: 10px;
  height: 10px;
  background-color: #10b981;
  border-radius: 50%;
  margin-right: 8px;
}

O que a Propriedade content Pode Conter?

  • Aspas Vazias (content: "";): O padrão para formas geométricas decorativas, máscaras e overlays.
  • Texto Fixo ou Emojis: content: "★ "; ou content: " • ";.
  • Leitura Dinâmica de Atributos: content: attr(data-tooltip); permite ler valores de atributos HTML para criar tooltips 100% nativos sem JavaScript!

4. Casos de Uso Clássicos na Indústria

1. Sublinhado Animado no Hover (Underline Expandível)

Em vez de usar o velho e rígido text-decoration: underline, criamos uma linha fina com ::after que se expande do centro para as pontas suavemente:

CSS3 23 linhas 
.link-magico {
  position: relative;
  text-decoration: none;
  color: #38bdf8;
}
 
.link-magico::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #38bdf8;
  transform: scaleX(0); /* Inicialmente invisível (comprimido a zero) */
  transition: transform 0.3s ease;
  transform-origin: right;
}
 
.link-magico:hover::after {
  transform: scaleX(1); /* Expande para 100% da largura no hover */
  transform-origin: left;
}

2. Máscara Escura sobre Imagens (Overlay)

Para escurecer um cartão com imagem de fundo e garantir que o texto branco seja sempre legível (contraste WCAG):

CSS3 17 linhas 
.card-com-overlay {
  position: relative;
  overflow: hidden;
}
 
.card-com-overlay::before {
  content: "";
  position: absolute;
  inset: 0; /* Preenche 100% da área do card */
  background: rgba(0, 0, 0, 0.55); /* Máscara semitransparente */
  z-index: 1;
}
 
.card-conteudo {
  position: relative;
  z-index: 2; /* Fica acima da máscara */
}

5. Outros Pseudo-elementos Modernos Essenciais

::selection — A Identidade Visual do Texto Selecionado

Quando o usuário arrasta o mouse para copiar um trecho do seu site, você pode trocar o azul genérico do sistema pela cor da marca da sua empresa:

CSS3 5 linhas 
/* Personaliza o grifo de texto do site inteiro */
::selection {
  background-color: #38bdf8;
  color: #0b0f19;
}

::marker — Marcadores de Lista sem Gambiarras

No passado, mudar a cor da bolinha de uma lista <li> exigia remover o estilo nativo e reconstruí-lo do zero. Hoje usamos ::marker:

CSS3 4 linhas 
li::marker {
  color: #10b981; /* A bolinha ou número fica verde sem afetar o texto! */
  font-size: 1.1rem;
}

6. Acessibilidade e Leitores de Tela (WCAG 2.2)

Atenção com Textos em Pseudo-elementos: Leitores de tela modernos (como VoiceOver e NVDA) leem em voz alta o texto colocado dentro de content: "..."! Portanto, nunca insira textos críticos apenas no CSS. Se o pseudo-elemento for puramente decorativo, use content: "" para evitar poluir a leitura de usuários cegos.

7. Laboratório Prático: Tooltip Nativo e Efeitos de Pseudo-elementos

No código interativo abaixo, construímos um componente que combina tooltip nativo via attr(), bolinha de status pulsante, marcador de lista customizado e grifo de texto personalizado:

HTML5 111 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Pseudo-elementos CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 40px;
      margin: 0;
    }
 
    /* 1. SELEÇÃO DE TEXTO PERSONALIZADA (::selection) */
    ::selection {
      background: #f59e0b;
      color: #000;
    }
 
    /* 2. CARD COM STATUS ONLINE (::before) */
    .card-usuario {
      max-width: 440px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 24px;
      margin-bottom: 30px;
    }
 
    .status-badge {
      display: inline-flex;
      align-items: center;
      font-size: 0.85rem;
      font-weight: 600;
      color: #10b981;
      margin-bottom: 12px;
    }
 
    /* Bolinha verde desenhada puramente no CSS */
    .status-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      background: #10b981;
      border-radius: 50%;
      margin-right: 8px;
      box-shadow: 0 0 8px #10b981;
    }
 
    /* 3. TOOLTIP NATIVO SEM JS (::after com attr) */
    .tooltip-link {
      position: relative;
      color: #38bdf8;
      text-decoration: underline;
      cursor: pointer;
      display: inline-block;
    }
 
    .tooltip-link::after {
      content: attr(data-tooltip); /* Lê o texto do atributo HTML! */
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) scale(0.9);
      background: #020617;
      color: #fff;
      font-size: 0.75rem;
      padding: 6px 12px;
      border-radius: 6px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      border: 1px solid #334155;
    }
 
    .tooltip-link:hover::after {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
 
    /* 4. MARCADOR DE LISTA CUSTOMIZADO (::marker) */
    ul.lista-recursos li::marker {
      color: #38bdf8;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <h2 style="color:#f1f5f9; margin-top:0;">Demonstração de Pseudo-elementos</h2>
  <p style="color:#94a3b8; font-size:0.9rem;">
    Selecione qualquer trecho deste texto com o mouse para ver o <code>::selection</code> amarelo em ação!
  </p>
 
  <div class="card-usuario">
    <div class="status-badge">Servidor Ativo</div>
    <h3 style="margin:0 0 10px 0;">Plataforma WebZoneWare</h3>
    <p style="color:#94a3b8; font-size:0.9rem; line-height:1.6;">
      Passe o mouse sobre esta <span class="tooltip-link" data-tooltip="⚡ Dica de Engenharia: 100% puro CSS!">palavra com tooltip</span> para ver o texto flutuante gerado via <code>content: attr()</code>.
    </p>
 
    <ul class="lista-recursos" style="color:#cbd5e1; font-size:0.9rem;">
      <li>CSS Grid 2D Completo</li>
      <li>Flexbox Unidimensional</li>
      <li>Acessibilidade WCAG 2.2</li>
    </ul>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste passar o cursor sobre a palavra com tooltip e selecionar o texto para comprovar a elegância dos pseudo-elementos:

⚡ Abrir no Playground IDE →

8. Resumo e Próximos Passos

  • Pseudo-elementos (usando ::) criam nós virtuais ou estilizam subpartes sem alterar o código HTML.
  • ::before e ::after são inseridos como o primeiro e o último filho interno da caixa selecionada.
  • A propriedade content: "" é estritamente obrigatória; sem ela, o pseudo-elemento não é renderizado.
  • content: attr(nome) permite ler dados de atributos HTML dinamicamente (como data-tooltips).
  • ::marker estiliza as bolinhas e numerações de listas de forma nativa e limpa.
  • ::selection customiza as cores do texto grifado pelo cursor do usuário.

Próximo Passo: Agora que você pode criar elementos visuais no CSS, como movê-los, girá-los, esticá-los e criar sensações de profundidade em 3D? Na Lição 42, desvendaremos as Transformações 2D e 3D no CSS (translate, rotate, scale, skew e perspective)!

O post Pseudo-elementos no CSS: ::before e ::after | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/pseudo-elementos-before-after/feed/ 0 Pseudo-classes Estruturais: nth-child no CSS | Web Academy https://webzoneware.com/web-academy/curso-css/pseudo-classes-estruturais-nth-child/ https://webzoneware.com/web-academy/curso-css/pseudo-classes-estruturais-nth-child/#respond Thu, 22 Oct 2026 03:23:53 +0000 https://webzoneware.com/?p=29459 Chegamos ao grande encerramento do Módulo 4! Em aplicações web corporativas, os dados exibidos na tela são quase sempre dinâmicos: listas de clientes, tabelas de vendas ou feeds de postagens gerados por bancos de dados. Colocar classes manuais em cada linha HTML (como .item-1, .item-2, .item-zebrado) seria inviável. As Pseudo-classes Estruturais capacitam o CSS a […]

O post Pseudo-classes Estruturais: nth-child no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> Chegamos ao grande encerramento do Módulo 4! Em aplicações web corporativas, os dados exibidos na tela são quase sempre dinâmicos: listas de clientes, tabelas de vendas ou feeds de postagens gerados por bancos de dados. Colocar classes manuais em cada linha HTML (como .item-1, .item-2, .item-zebrado) seria inviável. As Pseudo-classes Estruturais capacitam o CSS a inspecionar a árvore do DOM e aplicar estilos cirúrgicos com base na posição ordinal, parentesco ou fórmulas matemáticas elegantes. Nesta lição, você dominará o poder de :nth-child, a fórmula An + B, a distinção para :nth-of-type, o seletor de negação :not() e o autolimpante :empty.

1. Os Guardiões das Extremidades: :first-child, :last-child e :only-child

Antes de mergulhar na matemática avançada, o CSS nos oferece seletores semânticos diretos para os limites de um contêiner:

CSS3 16 linhas 
/* Seleciona o primeiro item de uma lista */
li:first-child {
  font-weight: 700;
  color: #38bdf8;
}
 
/* O uso mais clássico da web: remove a borda divisória do último item */
li:last-child {
  border-bottom: none;
}
 
/* Estiliza um elemento se ele for o ÚNICO filho dentro do seu pai */
.alerta:only-child {
  margin: 0 auto;
  text-align: center;
}

2. A Matemática Sagrada da Fórmula :nth-child(An + B)

A pseudo-classe :nth-child() aceita palavras-chave simples ou uma expressão algébrica linear An + B para varrer elementos em intervalos programados:

1. Palavras-Chave Rápidas (Listas e Tabelas Zebradas)

  • :nth-child(odd): Seleciona todos os filhos em posições ímpares (1, 3, 5, 7…).
  • :nth-child(even): Seleciona todos os filhos em posições pares (2, 4, 6, 8…). É a fórmula canônica para zebrar tabelas financeiras!
CSS3 4 linhas 
/* Linhas pares com fundo sutilmente destacado */
tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03);
}

2. A Mecânica da Equação An + B

Como o navegador computa essa fórmula? Ele executa um laço onde n começa em zero (0) e incrementa sucessivamente (0, 1, 2, 3, 4…):

  • A representa a frequência ou intervalo de repetição (o “passo”).
  • B representa o ponto de partida inicial (o “deslocamento” ou offset).
Expressão CSS Valores de n Calculados Índices Selecionados no HTML Aplicação Prática
:nth-child(3) Sem variável Apenas o 3º elemento Destacar um card de plano específico.
:nth-child(3n) 3(1), 3(2), 3(3)… 3, 6, 9, 12, 15… Fim de linha em grades de 3 colunas.
:nth-child(3n + 1) 3(0)+1, 3(1)+1, 3(2)+1… 1, 4, 7, 10, 13… Início de linha em grades de 3 colunas.
:nth-child(n + 5) 0+5, 1+5, 2+5… 5, 6, 7, 8… em diante Estilizar itens excedentes (“ver mais”).
:nth-child(-n + 3) -0+3, -1+3, -2+3 1, 2 e 3 apenas! O Seletor de Pódio: destaca os 3 primeiros colocados de um ranking!

3. O Duelo Crucial: :nth-child vs. :nth-of-type

Existe uma armadilha clássica que derruba milhares de desenvolvedores no CSS. Observe este código HTML:

HTML5 5 linhas 
<div class="artigo">
  <h1>Título Principal</h1>
  <p>Primeiro parágrafo.</p>
  <p>Segundo parágrafo.</p>
</div>

Se você escrever p:nth-child(1), nada será estilizado! Por quê? Porque aos olhos do navegador, o filho de índice 1 dentro da div é o <h1>. Como o filho 1 não é um <p>, a regra falha.

A Diferença Arquitetural:

  • :nth-child: Conta todos os elementos irmãos indiscriminadamente, independentemente da tag.
  • :nth-of-type: Filtra a contagem exclusivamente entre irmãos da mesma tag HTML! No exemplo acima, p:nth-of-type(1) selecionará perfeitamente o Primeiro parágrafo.

Bônus Moderno: A Sintaxe :nth-child(An + B of .classe)

O CSS Selectors Level 4 trouxe uma das adições mais pedidas da história: a capacidade de contar filhos que correspondam a uma classe específica usando a palavra-chave of:

CSS3 4 linhas 
/* Seleciona o 2º item que possui a classe .ativo, ignorando os demais! */
.item:nth-child(2 of .ativo) {
  border: 2px solid #10b981;
}

4. A Pseudo-classe de Negação: :not()

Em vez de aplicar um estilo a todos os elementos e depois criar uma classe especial para desfazê-lo, a pseudo-classe :not() permite excluir alvos diretamente na regra:

CSS3 10 linhas 
/* Adiciona separador em todos os itens, EXCETO no último */
.lista-item:not(:last-child) {
  border-bottom: 1px solid #334155;
  margin-bottom: 12px;
}
 
/* Todos os botões ganham opacidade reduzida quando desativados */
button:not(:disabled):hover {
  filter: brightness(1.1);
}

5. A Pseudo-classe Autolimpante: :empty

A pseudo-classe :empty seleciona elementos que não contêm absolutamente nada em seu interior (nem elementos filhos, nem nós de texto).

É a solução definitiva para selos e badges de notificação que devem sumir automaticamente quando o contador for zero:

CSS3 4 linhas 
/* Se o JavaScript esvaziar o badge, ele desaparece da tela sem deixar buraco! */
.badge-contador:empty {
  display: none;
}

6. Laboratório Prático: Ranking Zebrado e Destaque de Pódio

No exemplo abaixo, combinamos a fórmula matemática de pódio :nth-child(-n + 3) para destacar os 3 líderes de um ranking, zebramos as linhas com :nth-child(even) e usamos :not(:last-child) e :empty:

HTML5 121 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Pseudo-classes Estruturais</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 30px;
    }
 
    .tabela-ranking {
      width: 100%;
      max-width: 580px;
      border-collapse: collapse;
      background: #1e293b;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #334155;
    }
 
    th, td {
      padding: 14px 20px;
      text-align: left;
    }
 
    th {
      background: #0f172a;
      color: #94a3b8;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
 
    /* 1. SEPARADOR EM TODOS EXCETO O ÚLTIMO (:not(:last-child)) */
    tbody tr:not(:last-child) td {
      border-bottom: 1px solid #334155;
    }
 
    /* 2. LINHAS ZEBRADAS (:nth-child(even)) */
    tbody tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.02);
    }
 
    /* 3. O SELETOR DE PÓDIO: TOP 3 MELHORES (:nth-child(-n + 3)) */
    tbody tr:nth-child(-n + 3) td:first-child {
      font-weight: 800;
      color: #f59e0b; /* Dourado para o Top 3 */
    }
 
    tbody tr:nth-child(1) td:first-child::after { content: " 🥇"; }
    tbody tr:nth-child(2) td:first-child::after { content: " 🥈"; }
    tbody tr:nth-child(3) td:first-child::after { content: " 🥉"; }
 
    /* 4. BADGE AUTOLIMPANTE (:empty) */
    .badge-trofeu:empty {
      display: none;
    }
 
    .badge-trofeu {
      background: #3b82f6;
      color: #fff;
      font-size: 0.75rem;
      padding: 3px 8px;
      border-radius: 9999px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h2 style="color:#38bdf8; margin-top:0;">Quadro de Líderes da Web Academy</h2>
  <p style="color:#94a3b8; font-size:0.9rem; margin-bottom:20px;">
    Tabela estruturada matematicamente no CSS sem nenhuma classe individual por linha:
  </p>
 
  <table class="tabela-ranking">
    <thead>
      <tr>
        <th>Posição</th>
        <th>Desenvolvedor</th>
        <th>Pontos</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1º</td>
        <td>Carlos Mendes</td>
        <td>9.840</td>
        <td><span class="badge-trofeu">Líder</span></td>
      </tr>
      <tr>
        <td>2º</td>
        <td>Beatriz Lima</td>
        <td>9.410</td>
        <td><span class="badge-trofeu">Pro</span></td>
      </tr>
      <tr>
        <td>3º</td>
        <td>Rafael Souza</td>
        <td>8.950</td>
        <td><span class="badge-trofeu">Pro</span></td>
      </tr>
      <tr>
        <td>4º</td>
        <td>Juliana Ramos</td>
        <td>7.620</td>
        <td><span class="badge-trofeu"></span><!-- Vazio: auto-oculta com :empty! --></td>
      </tr>
      <tr>
        <td>5º</td>
        <td>Diego Alves</td>
        <td>6.890</td>
        <td><span class="badge-trofeu"></span><!-- Vazio: auto-oculta com :empty! --></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Abra este laboratório no Playground IDE e teste alterar a fórmula :nth-child(-n + 3) para :nth-child(n + 4) e comprove o controle cirúrgico sobre a árvore de elementos:

⚡ Abrir no Playground IDE →

7. Celebração do Módulo 4 e Boas-Vindas ao Módulo 5

Parabéns por conquistar mais um marco extraordinário! Você concluiu 100% do Módulo 4: CSS Grid & Design Responsivo!

Ao longo das últimas 10 lições, você adquiriu habilidades de nível sênior:

  • Compreendeu a arquitetura bidimensional (2D) do CSS Grid Layout.
  • Dominou a unidade fracionária fr e a grade implícita dinâmica.
  • Criou grades mágicas auto-responsivas sem media queries com repeat(), minmax() e auto-fit.
  • Unificou o espaçamento moderno com gap no Grid e no Flexbox.
  • Projetou layouts visuais em ASCII Art com grid-template-areas.
  • Adotou a mentalidade Mobile-First progressiva com a meta viewport.
  • Dominou a moderna Sintaxe de Faixa das Media Queries e preferências de acessibilidade.
  • Eliminou distorções e o temido CLS com object-fit e aspect-ratio.
  • E dominou integralmente as pseudo-classes dinâmicas e estruturais com matemática no DOM.

Rumo à Reta Final: Entraremos agora no quinto e último módulo da trilha: Módulo 5: Animações, CSS Moderno & Projeto Final! Na Lição 41, desvendaremos o poder criativo dos Pseudo-elementos (::before e ::after)!

O post Pseudo-classes Estruturais: nth-child no CSS | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/pseudo-classes-estruturais-nth-child/feed/ 0 Pseudo-classes no CSS: hover, focus e visible | Web Academy https://webzoneware.com/web-academy/curso-css/pseudo-classes-hover-focus-visible/ https://webzoneware.com/web-academy/curso-css/pseudo-classes-hover-focus-visible/#respond Thu, 22 Oct 2026 03:18:11 +0000 https://webzoneware.com/?p=29457 Uma página web onde os elementos não reagem às ações do usuário parece estática e desprovida de vida. No CSS, o que transforma um simples documento de marcação em uma interface digital tátil e responsiva são as Pseudo-classes (identificadas por um único caractere de dois pontos :). Elas permitem aplicar regras de estilo condicionadas ao […]

O post Pseudo-classes no CSS: hover, focus e visible | Web Academy apareceu primeiro em Web-Zoneware.

]]> Uma página web onde os elementos não reagem às ações do usuário parece estática e desprovida de vida. No CSS, o que transforma um simples documento de marcação em uma interface digital tátil e responsiva são as Pseudo-classes (identificadas por um único caractere de dois pontos :). Elas permitem aplicar regras de estilo condicionadas ao estado dinâmico de um elemento: passar o cursor por cima, pressionar um botão, selecionar um campo com a tecla Tab ou validar um formulário. Nesta lição, você dominará o ciclo de vida dos links (regra LVHA), a revolução de acessibilidade do :focus-visible e os estados de formulário modernos.

1. O que é uma Pseudo-classe?

Enquanto um seletor comum (como .botao) mira o elemento em seu estado estático padrão, uma pseudo-classe visa o elemento em uma circunstância temporal ou comportamental transitória.

Diferença Essencial de Sintaxe:

  • Pseudo-classe (1 caractere :): Reflete um estado dinâmico do elemento inteiro (ex.: :hover, :focus, :checked).
  • Pseudo-elemento (2 caracteres ::): Cria ou estiliza uma parte interna específica do elemento (ex.: ::before, ::after, ::placeholder).

2. O Ciclo de Vida dos Links e a Regra LVHA (LoVe HAte)

Ao estilizar links de navegação, a ordem em que você escreve as regras no arquivo CSS não é opcional — ela é ditada pela cascata de especificidade do navegador. Se você inverter a ordem, um estado pode anular o outro silenciosamente.

Para nunca errar, memorize o mnemônico mundial da web: LoVe HAte (Link, Visited, Hover, Active):

CSS3 21 linhas 
/* 1. L (Link): Estado virgem (não visitado) */
a:link {
  color: #38bdf8;
  text-decoration: none;
}
 
/* 2. V (Visited): Link já clicado pelo usuário anteriormente */
a:visited {
  color: #a855f7;
}
 
/* 3. H (Hover): O ponteiro do mouse repousa sobre o link */
a:hover {
  color: #60a5fa;
  text-decoration: underline;
}
 
/* 4. A (Active): O exato instante em que o clique está pressionado */
a:active {
  color: #ef4444;
}

3. O Duelo de Acessibilidade: :focus vs. :focus-visible

Durante décadas, designers gráficos e desenvolvedores cometeram o maior crime contra a acessibilidade na web: aplicar outline: none; ou outline: 0; para eliminar a borda azul nativa do navegador que aparecia quando um botão era clicado com o mouse.

O efeito colateral foi devastador: milhões de pessoas com deficiência motora que navegam exclusivamente pela tecla Tab ficaram cegas, sem saber onde o cursor estava na tela!

A Salvação: A Pseudo-classe :focus-visible

A W3C resolveu esse conflito histórico criando a pseudo-classe :focus-visible:

  • Se o usuário clicar no botão com o mouse ou tocar na tela do celular: nenhum anel de foco é exibido (design limpo!).
  • Se o usuário navegar usando a tecla Tab do teclado ou um leitor de tela: o navegador ativa :focus-visible e exibe um anel de foco destacado!
CSS3 6 linhas 
/* Padrão de Alta Acessibilidade e Design Impecável */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 4px; /* Afasta o anel das bordas arredondadas com elegância */
}

4. O Efeito Cascata do :focus-within

A pseudo-classe :focus-within possui um comportamento genial: ela seleciona um elemento contêiner pai se qualquer elemento filho dentro dele receber foco!

É a técnica perfeita para acender a borda de um cartão de formulário ou escurecer o fundo quando o usuário clica em qualquer campo de texto interno:

CSS3 5 linhas 
/* O cartão inteiro ganha uma borda azul e sombra quando o usuário foca no input */
.cartao-login:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

5. Estados Interativos de Formulários

O CSS moderno permite validar e reagir a campos de formulário sem precisar de uma única linha de JavaScript:

Pseudo-classe Condição de Ativação Exemplo de Uso
:disabled O elemento possui o atributo disabled. Botões cinzas sem clique (cursor: not-allowed; opacity: 0.5).
:checked Caixa de seleção (checkbox) ou rádio marcada. Criação de botões toggle e switches personalizados no CSS.
:valid O valor digitado atende aos requisitos do campo. Exibir uma borda verde suave quando o e-mail for válido.
:invalid O valor viola regras de tipo, formato ou required. Borda vermelha e aviso quando o campo estiver incorreto.
:placeholder-shown O texto do placeholder ainda está visível. Efeito de rótulo flutuante (Floating Label) ao digitar.

6. Laboratório Prático: Formulário Reativo e Foco Acessível

No código interativo abaixo, experimente navegar usando a tecla Tab para ver o anel do :focus-visible com outline-offset, observe o cartão reagindo com :focus-within e teste digitar um e-mail para ver a validação em tempo real com :valid:

HTML5 112 linhas 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Pseudo-classes CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 40px;
      margin: 0;
    }
 
    /* 1. O PAI REAGE COM :focus-within */
    .formulario-card {
      max-width: 420px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 24px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
 
    .formulario-card:focus-within {
      border-color: #38bdf8;
      box-shadow: 0 8px 30px rgba(56, 189, 248, 0.15);
    }
 
    .campo-grupo {
      margin-bottom: 20px;
    }
 
    label {
      display: block;
      font-size: 0.85rem;
      color: #94a3b8;
      margin-bottom: 8px;
      font-weight: 600;
    }
 
    /* 2. ESTADOS DO INPUT (:valid e :invalid) */
    .input-texto {
      width: 100%;
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 8px;
      padding: 12px 14px;
      color: #f8fafc;
      font-size: 1rem;
      box-sizing: border-box;
      outline: none;
      transition: border-color 0.2s ease;
    }
 
    .input-texto:focus {
      border-color: #38bdf8;
    }
 
    .input-texto:not(:placeholder-shown):valid {
      border-color: #10b981; /* Borda verde quando válido! */
    }
 
    .input-texto:not(:placeholder-shown):invalid {
      border-color: #ef4444; /* Borda vermelha se formato inválido! */
    }
 
    /* 3. BOTÃO COM :hover, :active E :focus-visible */
    .btn-enviar {
      width: 100%;
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 14px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.1s ease;
    }
 
    .btn-enviar:hover {
      background: #1d4ed8;
    }
 
    .btn-enviar:active {
      transform: scale(0.98); /* Feedback tátil ao clicar */
    }
 
    /* ACESSIBILIDADE POR TECLADO (TAB) */
    .btn-enviar:focus-visible {
      outline: 2px solid #38bdf8;
      outline-offset: 4px;
    }
  </style>
</head>
<body>
  <div class="formulario-card">
    <h3 style="margin-top:0; color:#f1f5f9;">Acesso ao Portal</h3>
    <p style="color:#64748b; font-size:0.85rem; margin-bottom:20px;">
      Navegue usando o <kbd>Tab</kbd> do teclado para ver o <code>:focus-visible</code> em ação!
    </p>
 
    <div class="campo-grupo">
      <label for="email">E-mail Corporativo</label>
      <input type="email" id="email" class="input-texto" placeholder="seu@email.com" required>
    </div>
 
    <button type="button" class="btn-enviar">Entrar no Ambiente →</button>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste clicar no formulário para comprovar o :focus-within no contêiner e a validação de e-mail dinâmica sem JavaScript:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

  • Pseudo-classes (com :) estilizam elementos com base no seu estado dinâmico ou comportamental.
  • A ordem dos links deve seguir estritamente o mnemônico LVHA: :link, :visited, :hover e :active.
  • Nunca use outline: none sem fornecer um substituto de alta visibilidade!
  • :focus-visible exibe anéis de foco exclusivamente na navegação por teclado (Tab) e leitores de tela, mantendo cliques de mouse limpos.
  • :focus-within estiliza o elemento pai quando qualquer nó filho recebe foco.
  • :valid e :invalid permitem criar feedbacks visuais imediatos em formulários HTML5.

A Conclusão do Módulo 4 Está Próxima: Além dos estados do usuário, como selecionar o primeiro filho de uma lista, zebrar tabelas alternadas a cada duas linhas ou ignorar certos nós? Na Lição 40, fecharemos o Módulo 4 dominando as Pseudo-classes Estruturais (:nth-child, :first-child, :last-child, :not e :empty)!

O post Pseudo-classes no CSS: hover, focus e visible | Web Academy apareceu primeiro em Web-Zoneware.

]]> https://webzoneware.com/web-academy/curso-css/pseudo-classes-hover-focus-visible/feed/ 0