LM • CSS Efeitos CSS em Elementos
Unidade Curricular de Linguagem de Marcação • Atividade em Squads 8 Squads • 8 Temas

Pesquisa e Apresentação: Efeitos CSS em Elementos

Cada um dos 8 squads da turma será responsável por pesquisar, construir exemplos práticos em código e apresentar para a sala um dos 8 tópicos sobre Efeitos CSS em Elementos da Unidade Curricular de Linguagem de Marcação. O objetivo é dominar a sintaxe, entender quando aplicar cada efeito em interfaces reais e compartilhar boas práticas com os colegas.

Concepção pedagógica: Prof. Esp. Leandro Gaudio Rosa

Atribuição dos temas: A definição de qual tema ficará com cada squad será realizada pelo professor em sala utilizando o sistema de sorteio da turma. Assim que o seu squad receber o tema, utilize o escopo abaixo para organizar a pesquisa e a apresentação.
Acesso rápido aos temas:
1 Transition 2 Animations 3 Rotate 4 Scale 5 Translate 6 Gradiente 7 Opacity 8 Border-radius

Estrutura Obrigatória da Apresentação

Independentemente do tema atribuído, todos os 8 squads devem estruturar sua apresentação cobrindo os 6 pilares abaixo:

01

Conceito e Aplicação em UI

Expliquem com palavras simples o que o efeito faz e mostrem onde ele é usado no dia a dia (botões, cards, menus, feedbacks visuais, avatares, modais).

02

Sintaxe e Valores

Apresentem a sintaxe completa no CSS, propriedades individuais, forma abreviada (shorthand), unidades aceitas e valores mais comuns.

03

Demo Prática em Código

Construam um exemplo funcional em HTML + CSS (e JS apenas se necessário para gatilho) para demonstrar ao vivo o código e o resultado no navegador.

04

Boas Práticas e Cuidados

Destaquem armadilhas comuns, impacto no layout/performance, compatibilidade e cuidados de acessibilidade (contraste, redução de movimento).

05

Formato e Tempo

Apresentação objetiva de 5 a 8 minutos por squad, com participação ativa de todos os integrantes e tempo breve para dúvidas da turma.

06

Código Grande e Visível

Projetem o código ampliado no editor e no navegador para que até quem está no fundo da sala consiga ler sem esforço cada propriedade CSS.

Critérios de Avaliação

O que será observado durante a apresentação de cada squad em sala:

Clareza Conceitual

Explicação objetiva para quem nunca usou o recurso, sem apenas ler documentação.

Precisão Técnica

Domínio das propriedades, unidades, valores e diferenças entre sintaxes.

Exemplo Prático e Visibilidade

Código limpo, projetado em tamanho grande e legível para toda a sala, funcionando ao vivo e demonstrando o desafio proposto.

UX, Acessibilidade e Equipe

Atenção às boas práticas visuais, organização dos slides/demo e divisão de fala.

Escopo de Pesquisa dos 8 Temas

Filtre pelo tema do seu squad para focar na pesquisa ou navegue por todos os tópicos. Use as prévias interativas para visualizar o comportamento de cada efeito.

1

Transition

transition transition-property transition-duration transition-timing-function transition-delay

Permite suavizar a mudança gradual entre dois estados de um elemento (por exemplo, do estado normal para :hover ou :focus) ao longo de um tempo definido.

O que o squad deve pesquisar e explicar

  • As 4 subpropriedades: transition-property, transition-duration (em s ou ms), transition-timing-function e transition-delay.
  • Curvas de aceleração: diferença entre linear, ease, ease-in, ease-out, ease-in-out e como funciona cubic-bezier().
  • Shorthand e múltiplas transições: como combinar tudo em transition e animar propriedades diferentes com tempos distintos separadas por vírgula.
  • Gatilhos e limites: uso com :hover, :focus, :active e troca de classe via JS; por que propriedades como display: none não interpolam da forma tradicional.
Armadilhas e boas práticas: Evitem usar transition: all indiscriminadamente (pode animar mudanças indesejadas e custar performance). Prefiram transições curtas entre 150ms e 350ms para micro-interações de UI.
Desafio prático para a apresentação: Criem um botão ou card interativo que altera cor, sombra e leve deslocamento no :hover e no :focus-visible, comparando um elemento sem transition e outro com transition configurada.
Checklist de preparação do squad 0/4
2

Animations

@keyframes animation animation-iteration-count animation-fill-mode prefers-reduced-motion

Permite criar sequências completas de animação com múltiplos estágios intermediários usando @keyframes, podendo rodar automaticamente e em loop sem depender de um evento de hover.

O que o squad deve pesquisar e explicar

  • Regra @keyframes: definição de etapas com from/to ou porcentagens (0%, 50%, 100%).
  • Propriedades principais: animation-name, animation-duration, animation-timing-function, animation-delay e animation-iteration-count (ex.: infinite).
  • Controle do ciclo: animation-direction (normal, reverse, alternate), animation-fill-mode (forwards, backwards, both) e animation-play-state (paused/running).
  • Transition vs Animation: quando escolher cada uma em um projeto real.
Armadilhas e boas práticas: Sempre considerem acessibilidade para pessoas com sensibilidade a movimento usando a media query @media (prefers-reduced-motion: reduce). Além disso, evitem animar propriedades que recalculam layout (como width ou top).
Desafio prático para a apresentação: Criem uma animação com pelo menos 3 etapas no @keyframes (ex.: um indicador de carregamento, badge pulsante ou entrada de card) demonstrando o efeito de animation-fill-mode: forwards ou alternate.
Checklist de preparação do squad 0/4
3

Rotate

transform: rotate() rotate rotateX() / rotateY() transform-origin deg / turn

Gira um elemento em torno de um ponto de origem (pivô) no plano 2D ou em eixos 3D, sem alterar o espaço que ele ocupa no fluxo do documento.

O que o squad deve pesquisar e explicar

  • Sintaxe clássica vs moderna: uso dentro de transform: rotate(...) e a propriedade individual moderna rotate: 45deg (e por que ela facilita combinar transformações).
  • Unidades de ângulo: graus (deg), voltas (turn, ex: 0.5turn), radianos (rad) e gradianos (grad), incluindo valores negativos (sentido anti-horário).
  • 2D e 3D: rotate() / rotateZ() vs rotateX(), rotateY() e como perspective cria profundidade real.
  • Ponto de pivô: papel do transform-origin (padrão center vs cantos como top left ou coordenadas em %).
Armadilhas e boas práticas: Ao usar múltiplos efeitos com transform (ex.: translate + rotate), a ordem das funções altera o resultado final! Já em rotações 3D (cartões que viram), lembrem-se de investigar backface-visibility: hidden.
Desafio prático para a apresentação: Criem uma seta de menu/accordion que gira 180deg suavemente ou um card interativo com efeito 3D (flip card) mostrando frente e verso ao passar o mouse.
Checklist de preparação do squad 0/4
4

Scale

transform: scale() scale scaleX() / scaleY() overflow: hidden

Redimensiona visualmente um elemento proporcionalmente ou em eixos independentes (X e Y), sem recalcular nem deslocar os elementos vizinhos no layout.

O que o squad deve pesquisar e explicar

  • Sintaxe e parâmetros: transform: scale(n) vs propriedade independente scale; uso de 1 valor (uniforme) e 2 valores (scale(x, y)), além de scaleX() e scaleY().
  • Faixas de valores: 1 (tamanho original), maior que 1 (amplia), entre 0 e 1 (reduz), 0 (desaparece) e valores negativos (espelham/invertem o elemento!).
  • Fluxo de layout vs width/height: por que aumentar um botão com scale(1.08) no hover é melhor do que alterar width ou font-size.
  • Zoom contido: como combinar scale() em uma imagem dentro de um container com overflow: hidden.
Armadilhas e boas práticas: Valores muito altos de scale podem sobrepor elementos vizinhos ou deixar imagens/textos borrados em alguns cenários. Em botões, um crescimento sutil (1.03 a 1.08) já dá excelente feedback tátil.
Desafio prático para a apresentação: Construam um card de galeria ou produto em que, ao passar o mouse, apenas a imagem interna sofre zoom com scale(1.12) sem vazar das bordas do card (overflow: hidden).
Checklist de preparação do squad 0/4
5

Translate

transform: translate() translate translateX() / translateY() translate3d()

Desloca um elemento nos eixos horizontal (X), vertical (Y) ou profundidade (Z) a partir da sua posição original, mantendo o espaço original reservado no layout.

O que o squad deve pesquisar e explicar

  • Sintaxe clássica vs moderna: transform: translate(x, y), translateX(), translateY(), translateZ() e a propriedade independente translate: x y.
  • O detalhe especial da porcentagem (%): ao usar translate(50%, -50%), a porcentagem é calculada sobre o tamanho do próprio elemento, e não do elemento pai!
  • Padrões clássicos de UI: centralização com top: 50%; left: 50%; transform: translate(-50%, -50%), gavetas laterais (drawers), notificações toast e elevação de cards (translateY(-6px)).
  • Performance (GPU/Compositor): por que mover elementos com translate gera animações mais fluidas que animar margin ou top/left.
Armadilhas e boas práticas: Como o espaço original do elemento continua ocupado no documento, deslocamentos grandes podem fazê-lo cobrir outros textos ou sair da tela causando rolagem horizontal indesejada.
Desafio prático para a apresentação: Criem um card com efeito de "elevação" no hover usando translateY(-6px) + sombra, ou demonstrem a centralização perfeita de um badge/modal com translate(-50%, -50%).
Checklist de preparação do squad 0/4
6

Gradiente

linear-gradient() radial-gradient() conic-gradient() background-image background-clip: text

Gera transições suaves (ou faixas nítidas) entre duas ou mais cores diretamente via CSS, sem precisar exportar imagens pesadas do Figma ou Photoshop.

O que o squad deve pesquisar e explicar

  • Onde aplicar: por que gradientes são atribuídos a background-image (ou shorthand background) e não a background-color.
  • Os 3 tipos principais: linear-gradient() (direções como to right e ângulos em deg), radial-gradient() (circle, ellipse, at posição) e conic-gradient() (ótimo para gráficos de pizza e anéis de progresso).
  • Color stops e transparências: controle de porcentagens onde cada cor começa e termina, listras sólidas (stops na mesma posição) e uso de rgba() ou transparent.
  • Aplicações criativas: overlay escuro em gradiente sobre fotos de banner e efeito de texto gradiente com background-clip: text.
Armadilhas e boas práticas: Sempre definam uma background-color sólida de reserva antes ou junto com o gradiente e verifiquem o contraste de textos sobre todas as pontas da transição de cores. Além disso, gradientes CSS não são diretamente animáveis com transition de forma simples (pesquisem o truque de animar background-position!).
Desafio prático para a apresentação: Criem um hero banner ou card com fundo em gradiente (ou overlay gradiente sobre imagem) combinado com um título usando background-clip: text ou um gráfico circular feito com conic-gradient().
Checklist de preparação do squad 0/4
7

Opacity

opacity rgba() / rgb( / ) visibility: hidden pointer-events

Controla o nível de transparência de um elemento inteiro (e de todo o seu conteúdo interno), indo de totalmente invisível (0) a totalmente opaco (1).

O que o squad deve pesquisar e explicar

  • Escala de valores: de 0 (0%) até 1 (100%), aceitando decimais como 0.5 ou porcentagens (50%).
  • opacity vs canal alfa na cor (rgba() / hsla()): a diferença crucial! opacity deixa o elemento e todos os filhos transparentes; já rgb(37 99 235 / 0.4) deixa apenas o fundo translúcido, mantendo o texto 100% nítido.
  • opacity: 0 vs visibility: hidden vs display: none: um elemento com opacity: 0 ainda ocupa espaço na página e ainda pode ser clicado (a menos que se use pointer-events: none)!
  • Efeitos de Fade: combinação de opacity com transition para exibir tooltips, modais ou legendas ao passar o mouse.
Armadilhas e boas práticas: Reduzir a opacidade de textos ou botões desabilitados sem cuidado pode derrubar o contraste e prejudicar a leitura. Nunca usem apenas opacity: 0 para "esconder" um menu fechado se ele continuar clicável por cima de outros links.
Desafio prático para a apresentação: Façam uma demonstração lado a lado mostrando um card com texto usando opacity: 0.4 contra outro usando rgba() apenas no fundo, e mostrem uma legenda com efeito fade-in sobre uma imagem.
Checklist de preparação do squad 0/4
8

Border-radius

border-radius border-top-left-radius 50% / 9999px raios elípticos (/)

Arredonda os cantos da caixa de um elemento, permitindo criar desde cantos sutis em cards e botões em pílula até círculos perfeitos e formas orgânicas assimétricas.

O que o squad deve pesquisar e explicar

  • Shorthand de 1 a 4 valores: ordem horária a partir do canto superior-esquerdo (top-left, top-right, bottom-right, bottom-left) e propriedades individuais.
  • px/rem vs %: por que border-radius: 50% cria um círculo em elementos quadrados, mas vira uma elipse em retângulos (e por que usar 9999px para botões formato pílula).
  • Sintaxe avançada com barra (/): raios horizontais / raios verticais (ex.: 30% 70% 70% 30% / 30% 30% 70% 70%) para criar formas orgânicas (blobs).
  • Conteúdo interno: como imagens ou filhos pontudos podem vazar dos cantos arredondados sem overflow: hidden no container.
Armadilhas e boas práticas: Em cards com elementos internos arredondados (como uma foto dentro de um card com padding), usar o mesmo raio dentro e fora gera espessura visual estranha; a regra de harmonia é raio interno = raio externo - padding.
Desafio prático para a apresentação: Criem uma pequena vitrine com 3 componentes reais: um avatar perfeitamente circular (50%), um botão/badge em pílula (9999px) e um card ou forma orgânica usando cantos assimétricos.
Checklist de preparação do squad 0/4