Fundos e destaques discretos

Neste capítulo você vai usar cor e gradiente sem prejudicar o texto.

Seu ponto de partida

Estude depois do capítulo 09. O exemplo deste capítulo é 10-fundos, no pacote que acompanha o volume. Copie a pasta inicio para um diretório de prática e preserve o original. A raiz do exemplo é a referência concluída desta etapa. Sua cópia permite experimentar sem perder a referência.

Abra index.html da cópia com dois cliques. Edite o mesmo arquivo num editor de texto simples. Abrir no disco não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Antes de conferir, anote sua previsão. Salve, recarregue e compare. Se não acontecer o esperado, investigue o erro antes de avançar. Cada experiência parte dos valores da referência. Depois de conferir, desfaça somente a mudança desse experimento antes de começar a próxima lição. Você pode parar depois de uma lição e retomar mais tarde.

O fundo serve ao conteúdo

Background pode definir cor e outros recursos de fundo. Um destaque não precisa de fotografia para funcionar. A referência usa cores suaves com texto escuro e um cabeçalho organizado.

A cor do texto deve ser conferida junto com o fundo. Clarear ambos pode fazer uma combinação elegante parecer ilegível. Para texto normal, a referência segue contraste de pelo menos 4,5:1.

Faça no seu exemplo

Confira o destaque hero.

.hero { background: #e4f0f5; padding: 1.5rem; border-radius: .6rem; }

Mude uma coisa e preveja

Troque somente o fundo para #f7eadc.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

O painel muda para um tom quente e preserva o texto escuro.

Se não acontecer

Não mude color ao mesmo tempo; compare primeiro uma propriedade.

Gradiente é uma transição de cores

Linear-gradient cria uma transição. Ele é um valor de imagem de fundo, sem precisar baixar um arquivo. Uma cor de fundo separada oferece uma base. O gradiente não comunica informações essenciais sozinho.

Use cores próximas e discretas. O volume ensina um painel de evento, sem efeitos que distraiam da leitura.

Faça no seu exemplo

Confira o cabeçalho.

header {
  background-color: #e4f0f5;
  background-image: linear-gradient(120deg, #e4f0f5, #f5eee0);
}

Mude uma coisa e preveja

Troque somente 120deg por 90deg.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A direção da transição muda; o conteúdo permanece.

Se não acontecer

Se desaparecer o fundo inteiro, confira vírgulas, parênteses e os dois valores de cor.

Uma imagem de fundo não substitui alt

Uma imagem decorativa de fundo não tem atributo alt. Por isso conteúdo indispensável deve estar em texto ou em img com alternativa adequada. Não coloque horário e endereço apenas dentro de uma arte de fundo.

Se usar url no CSS, o caminho parte da pasta do CSS. Esta referência usa gradiente e texto real, sem depender de um recurso remoto.

Faça no seu exemplo

Confira que data e local estão no HTML.

<p>14 de setembro. Recife. Evento fictício.</p>

Mude uma coisa e preveja

Troque somente Recife por Recife, PE no texto real.

Anote o que você acha que vai acontecer antes de salvar e recarregar.

Recarregue e confira

A informação muda sem editar uma imagem.

Se não acontecer

Se a informação existir apenas numa arte, acrescente sua versão textual acessível antes de avançar.

A captura mostra um trecho da referência concluída. Abra e percorra o exemplo para conferir o restante. Experimentos temporários podem produzir outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Tente aplicar o que aprendeu antes de consultar os comentários.

1. Teste outra cor clara no painel.

2. Mude a direção do gradiente.

3. Explique onde escrever informação essencial.

Respostas comentadas

Compare sua explicação e o que realmente aconteceu. Outra solução pode funcionar se cumprir o objetivo e preservar o acesso ao conteúdo.

1. Preserve contraste e compare só o fundo.

2. O ângulo muda a direção, sem mudar as cores.

3. No HTML legível; um fundo decorativo não oferece alternativa de conteúdo.

Quando seguir

Você destaca uma área preservando leitura e informação. Se ainda precisa de ajuda, repita a experiência pequena antes de avançar.

O arquivo completo

Referência do exemplo 10-fundos, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de Estilos</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><h1>Conferência de Estilos</h1><p>Pequenos passos para aprender HTML &amp; CSS.</p><nav aria-label="Principal"><a href="index.html" aria-current="page">Início</a> <a href="palestrantes.html">Palestrantes</a> <a href="programacao.html">Programação</a> </nav></header>
<main id="conteudo" tabindex="-1"><section aria-labelledby="sobre"><h2 id="sobre">Sobre o evento</h2><p>Um evento fictício para aprender fazendo.</p></section><p class="aviso">Evento fictício. Não há inscrições reais.</p><section class="destaques" aria-label="Destaques"><article class="cartao"><h2>Aprender</h2><p>Um passo por vez.</p></article><article class="cartao"><h2>Praticar</h2><p>Uma mudança para conferir.</p></article></section><section class="hero" aria-labelledby="participe"><h2 id="participe">Uma ideia por experiência</h2><p>14 de setembro. Recife. Evento fictício.</p></section></main>
<footer><p>Conferência fictícia. Exercício local.</p></footer>
</body>
</html>

assets/stylesheets/main.css

:focus-visible { outline: 3px solid #b04d00; outline-offset: 3px; }
.pular { position: absolute; left: -10000px; }
.pular:focus { position: static; display: block; padding: 1rem; background: white; }
body { background: #eef4f7; color: #203246; }
h1 { color: #174d69; }
a { color: #174d69; text-underline-offset: .2em; }
.aviso { color: #703c16; font-weight: 700; }
body { font-family: Arial, sans-serif; font-size: 1.05rem; line-height: 1.6; }
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { line-height: 1.3; }
* { box-sizing: border-box; }
body { margin: 0; padding-inline: 1rem; }
header, main, footer { max-width: 64rem; margin-inline: auto; }
header, footer { padding: 1.5rem 0; }
main { padding: 1.5rem; background: white; border-radius: .6rem; }
section { margin-block: 1.5rem; }
.cartao { border: 1px solid #a6b8c3; padding: 1rem; border-radius: .4rem; }
.destaques { display: flex; flex-wrap: wrap; gap: 1rem; }
.destaques > .cartao { flex: 1 1 16rem; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
[aria-current=page] { font-weight: 700; }
@media (max-width: 40rem) { main { padding: 1rem; } }
.hero { background: #e4f0f5; padding: 1.5rem; border-radius: .6rem; }
header { background-color: #e4f0f5; background-image: linear-gradient(120deg, #e4f0f5, #f5eee0); padding-inline: 1rem; }