⚡ Curso de CSS • Web-ZoneWare

Background Size, Position e Gradientes CSS | Web Academy

Lição 10 de 50

Background Size, Position e Gradientes CSS | Web Academy

Finalizamos o Módulo 1: Fundamentos, Sintaxe & Seletores explorando o arsenal mais expressivo e visual do design de interfaces web: o dimensionamento dinâmico de imagens, o alinhamento posicional milimétrico e a geração procedural de gradientes no CSS. Ao compreender como o navegador renderiza cover, contain e calcula transições de cores matemáticas com linear-gradient(), radial-gradient() e conic-gradient(), você será capaz de construir interfaces com profundidade tridimensional, gráficos de pizza e efeitos de iluminação modernos com zero bytes de peso de download em imagens pesadas.

1. O Controle de Escala: background-size

Por padrão, uma imagem de fundo é desenhada em suas dimensões intrínsecas originais (background-size: auto). Se a imagem tiver 2000px de largura e a caixa tiver 400px, apenas o canto superior esquerdo da foto será exibido. Para controlar a escala proporcional da imagem dentro do elemento, o CSS disponibiliza duas palavras-chave consagradas e valores numéricos:

Valor Comportamento Proporcional Corta a Imagem? Deixa Espaços Vazios? Cenário Ideal
cover Preenche 100% da área da caixa, mantendo o aspect ratio. Sim (recorta o excedente). Nunca. Banners de Hero Section, fundos de tela cheia.
contain Redimensiona para caber 100% visível sem nenhum corte. Nunca. Sim (gera barras laterais vazias). Logotipos, fotos de produtos em e-commerce.
100% auto Ocupa 100% da largura da caixa e calcula a altura proporcional. Depende da altura. Possível no eixo Y. Faixas horizontais com proporção controlada.
largura altura Força dimensões exatas em pixels, rem ou porcentagem. Não corta, mas pode distorcer. Não. Texturas geométricas com repetição milimétrica.
CSS
bg-size-examples.css
CSS3 15 linhas 
/* O clássico banner Hero que preenche a tela inteira sem distorção */
.hero-banner {
    background-image: url('hero.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
 
/* O logotipo que precisa aparecer 100% inteiro dentro do card */
.card-logo {
    background-image: url('marca.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

2. Posicionamento Milimétrico: background-position

A propriedade background-position define as coordenadas de ancoragem da imagem dentro da caixa do elemento.

Palavras-Chave e Porcentagens

  • center: Centraliza a imagem perfeitamente nos eixos X e Y (equivalente a 50% 50%).
  • top left, bottom right: Ancoram nas extremidades da caixa.
  • center top: Mantém a imagem centralizada horizontalmente e alinhada ao topo (excelente para fotos verticais de pessoas em banners, evitando cortar a cabeça dos modelos!).

A Sintaxe Moderna de 4 Valores com Deslocamento (Edge Offsets)

O CSS permite posicionar a imagem com uma distância precisa a partir de qualquer borda específica:

CSS
edge-offset.css
CSS3 6 linhas 
/* Posiciona o ícone a 2rem da borda direita e a 1.5rem da borda inferior */
.caixa-suporte {
    background-image: url('chat-icon.svg');
    background-repeat: no-repeat;
    background-position: right 2rem bottom 1.5rem;
}

3. Gradientes Lineares: linear-gradient()

No CSS, gradientes são considerados imagens procedurais (do tipo de dado <image>) calculadas matematicamente pelo navegador. Por isso, são declarados na propriedade background-image (ou no shorthand background).

O linear-gradient() transita suavemente entre duas ou mais cores ao longo de uma linha reta imaginária.

CSS
linear-gradients.css
CSS3 24 linhas 
/* 1. Direção por palavras-chave com 'to' (to right, to bottom, to top left) */
.gradiente-horizontal {
    background-image: linear-gradient(to right, #0284c7, #38bdf8);
}
 
/* 2. Direção angular precisa em graus (deg) */
.gradiente-diagonal {
    /* 135deg transita do canto superior esquerdo para o inferior direito */
    background-image: linear-gradient(135deg, #0f172a, #1e293b);
}
 
/* 3. Múltiplas paradas de cor com porcentagens (Color Stops) */
.gradiente-tricolor {
    background-image: linear-gradient(90deg, 
        #0284c7 0%, 
        #38bdf8 50%, 
        #818cf8 100%
    );
}
 
/* 4. Paradas Bruscas (Hard Stops): Cria divisões nítidas sem desfoque (duas metades) */
.fundo-dividido {
    background-image: linear-gradient(to right, #0284c7 50%, #0f172a 50%);
}

4. Gradientes Radiais: radial-gradient()

O radial-gradient() irradia cores a partir de um ponto focal central em formato circular ou elíptico, imitando o comportamento óptico de holofotes e lâmpadas:

CSS
radial-gradients.css
CSS3 9 linhas 
/* 1. Gradiente circular centralizado */
.efeito-spotlight {
    background-image: radial-gradient(circle, #38bdf8 0%, #0f172a 70%);
}
 
/* 2. Ponto de luz descentralizado (posicionado no topo direito) */
.brilho-topo-direito {
    background-image: radial-gradient(ellipse at top right, rgba(56, 189, 248, 0.4), transparent 60%);
}

5. Gradientes Cônicos: conic-gradient()

O gradiente cônico é a função mais recente e versátil da especificação de imagens do CSS. Ele rotaciona as cores ao redor de um ponto central, como os ponteiros de um relógio ou um gráfico de setores circulares.

Com o conic-gradient(), podemos desenhar gráficos de pizza (Pie Charts) e indicadores de progresso circulares em HTML e CSS puros, sem bibliotecas pesadas de gráficos!

HTML & CSS
pie-chart.css
HTML5 1 linha 
<div class="grafico-pizza"></div>
CSS3 10 linhas 
/* Gráfico de Pizza 100% CSS representando 65% de conclusão */
.grafico-pizza {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-image: conic-gradient(
        #0284c7 0% 65%,     /* 65% azul primário */
        #334155 65% 100%    /* 35% cinza restante */
    );
}

6. O Shorthand Completo com a Barra Oblíqua (/)

Ao declarar a propriedade resumida background incluindo tamanho e posição, o CSS exige uma regra sintática obrigatória: a posição e o tamanho devem ser separados por uma barra inclinada (position / size):

CSS
shorthand-syntax.css
CSS3 4 linhas 
/* Ordem oficial: [color] [image] [repeat] [attachment] [position] / [size] */
.banner-mestre {
    background: #0f172a url('hero.webp') no-repeat center / cover;
}
⚠️
Sem a barra, a regra quebra! Se você escrever background: url('hero.webp') center cover; (sem a barra /), o navegador não conseguirá distinguir qual valor representa as coordenadas e qual representa a escala, descartando a propriedade inteira.

7. Laboratório Prático: Card Analítico com Efeito Spotlight e Gráfico Cônico

Neste laboratório de encerramento do Módulo 1, construiremos um card de métricas com acabamento profissional combinando gradientes radiais de iluminação, gráficos cônicos e bordas semitransparentes:

HTML
analytics-card.html
HTML5 23 linhas 
<div class="metric-card">
    <div class="metric-header">
        <span class="metric-badge">Módulo 1 Concluído</span>
        <h3 class="metric-title">Taxa de Absorção do Curso</h3>
    </div>
 
    <div class="metric-body">
        <!-- Gráfico circular de progresso puramente com conic-gradient -->
        <div class="donut-chart">
            <div class="donut-center">
                <span class="donut-number">84%</span>
                <span class="donut-label">Score</span>
            </div>
        </div>
 
        <div class="metric-info">
            <p class="metric-desc">
                Você dominou seletores básicos, combinadores, herança, especificidade, organização BEM e o sistema de backgrounds do CSS.
            </p>
            <a href="#modulo-2" class="btn-next-module">Avançar para Módulo 2 →</a>
        </div>
    </div>
</div>
CSS
analytics-card.css
CSS3 127 linhas 
/* Reset e base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #020617;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}
 
/* Card com Efeito Spotlight (Gradiente Radial + Cor Base Escura) */
.metric-card {
    background-color: #0b0f19;
    background-image: radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.15), transparent 70%);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 2.25rem;
    max-width: 520px;
    width: 100%;
    color: #f8fafc;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
 
.metric-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
    margin-bottom: 0.75rem;
}
 
.metric-title {
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 1.75rem;
}
 
.metric-body {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
 
/* Gráfico em Rosca (Donut) usando conic-gradient e aninhamento */
.donut-chart {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    /* Gradiente cônico dividindo 84% de progresso ciano e 16% de fundo escuro */
    background-image: conic-gradient(
        #38bdf8 0% 84%,
        #1e293b 84% 100%
    );
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}
 
/* Miolo que cria o furo da rosca (Donut) */
.donut-center {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: #0b0f19;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 
.donut-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
}
 
.donut-label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
 
.metric-info {
    flex: 1;
    min-width: 200px;
}
 
.metric-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}
 
.btn-next-module {
    display: inline-block;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
 
.btn-next-module:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
⚡ Abrir no Playground IDE →

8. Boas Práticas, Acessibilidade & Performance com Gradientes

  • ✅ Gradientes São Infinitamente Mais Rápidos que Imagens: Sempre que precisar de transições de cor ou sombras de fundo, use CSS Gradients. Eles têm 0 KB de download de rede, são desenhados diretamente na GPU e escalam perfeitamente para qualquer resolução de tela (Retina, 4K, 8K) sem granular ou pixelar.
  • ✅ Teste o Contraste WCAG em Ambas as Pontas: Se o seu gradiente linear vai de um azul escuro (#0f172a) a um ciano claro (#38bdf8), um texto branco funcionará na ponta escura, mas ficará totalmente ilegível na ponta clara. Certifique-se de que a taxa de contraste (4.5:1) seja atendida em toda a extensão do gradiente sob o texto.
  • ✅ Posicione com Intenção (Foco no Rosto): Em fotos verticais de pessoas como fundo de banners, configure background-position: center top;. Isso impede que cortes automáticos de tela no mobile decapitem a pessoa na foto.

9. 🎉 Conclusão do Módulo 1 & O Que Esperar no Módulo 2

Parabéns! Você concluiu com sucesso o Módulo 1: Fundamentos, Sintaxe & Seletores do Curso de CSS & CSS3 Completo!

Ao longo destas primeiras 10 aulas, construímos uma base sólida e inabalável: dominamos a anatomia das regras, as 3 formas de inserção, os seletores básicos e relacionais, a cascata com o cálculo de especificidade, o uso consciente de !important, a metodologia de arquitetura BEM, o sistema de cores HSL/OKLCH e o modelo avançado de backgrounds.

🏆
Prepare-se para o Módulo 2: O Box Model, Espaçamento & Tipografia:

Na Lição 11: O Box Model (Modelo de Caixa), entraremos no coração dimensional do CSS, dissecando Content, Padding, Border, Margin, colapso de margens e a indispensável propriedade box-sizing: border-box.

10. Ferramentas Relacionadas & Recursos

Valide e explore gradientes com as ferramentas integradas:

  • Playground Web IDE: Altere os ângulos e cores dos gradientes ao vivo no editor com preview instantâneo.
  • Limpador e Formatador CSS: Valide declarações complexas de gradientes e organize seu código com indentação limpa.

11. Referências Técnicas & Especificações Oficiais

Rolar para cima