CSS e desenho de interfaces · Lição 11 / 12

Movimento com escolha

Um detalhe animado deve respeitar quem prefere menos movimento.

Vamos descobrir juntos

1
Transition interpola mudanças de propriedades, como uma pequena transformação no hover. Evite transition:all sem necessidade; explicite a propriedade e uma duração curta. Movimento não deve carregar sozinho uma informação essencial.
2
O projeto começa sem movimento. Dentro de @media (prefers-reduced-motion:no-preference), acrescenta uma transição e deslocamento de 2px. Quando a preferência é reduce, esse bloco não se aplica.
3
A preferência vem do navegador/sistema, não da largura da janela. A oficina informa qual valor foi detectado. No arquivo local, mude a preferência nas configurações de acessibilidade ou na emulação do navegador e compare os dois estados.
4
Não use piscar rápido nem animação contínua nesta atividade. Verifique que remover o movimento preserva foco, texto e ação. O botão é de treino: a transição não significa que uma operação real aconteceu.

Oficina: uma interface, diferentes espaços

Edite o bloco <style id="lesson-css"> em “Meus arquivos e GitHub”. A prévia aplica esse CSS à estrutura HTML fornecida; confira alterações de HTML no arquivo baixado. Recursos externos e CSS fora do conjunto de estudo não são aceitos aqui.

Ir ao meu códigoLargura do documento de prévia

As medidas descrevem esta prévia, não garantem todos os tamanhos ou a acessibilidade completa. Teste conteúdo longo, zoom, teclado e tecnologias assistivas no projeto local.

Laboratório de contraste entre duas cores

Cor do textoCor do fundo

Razão aproximada ·

Cálculo apenas para duas cores sRGB opacas escolhidas aqui; não lê sua página. O limiar usa a razão sem arredondar. Não avalia transparência, gradientes, imagens, estados ou conformidade completa.

O código mudou. Aplique novamente para observar esta versão.CSS aplicado. Compare as medidas e teste o teclado dentro da prévia.Não foi possível aplicar. Mantenha um único style com id lesson-css, até 65.536 caracteres no documento e use o CSS ensinado, sem URLs, imports, escapes ou regras externas. Propriedades inválidas podem ser ignoradas pelo navegador; isto não é um validador completo.Página de estudo com seu CSSSimNãoMovimento reduzidoSem preferência por reduçãoO par atinge 4,5:1 para texto comum.O par fica abaixo de 4,5:1 para texto comum.<a href="#conteudo">Pular para o conteúdo</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p> <nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article> <article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section> <section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main> <footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>

Links oficiais e próximo passo

Referência para investigar

✦

SUA MISSÃO

Adicionar uma transição discreta somente quando a preferência permitir.

Leve com você

Compare reduce e no-preference e registre duração e transformação observadas. Mostre que a página continua utilizável nos dois casos.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Oficina de ideias: uma interface que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { button { transition: transform .15s ease; } button:hover { transform: translateY(-2px); } }
</style></head><body>
<a href="#conteudo">Pular para o conteúdo</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p>
<nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article>
<article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section>
<section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main>
<footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>
</body></html>

Formato do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.

Movimento com escolha

Vamos descobrir juntos

Oficina: uma interface, diferentes espaços

Medidas observadas na prévia

Laboratório de contraste entre duas cores

Links oficiais e próximo passo

Agora é a sua vez

Preveja, altere, compare

Leve com você

Meus arquivos e GitHub

Seu arquivo desta lição

Guardar no meu GitHub

Rullstpetbot