📚Módulo 4

🎨 Estilo e Interatividade

💻 Aula 10 👉 Transições e Animações no CSS.

🎯 Objetivos da Aula

● Entender a diferença entre transições e animações;

● Aprender a usar propriedades transition e transform;

● Criar animações com @keyframes;

● Aplicar efeitos de hover suaves e microinterações;

● Construir componentes animados e modernos sem usar JavaScript.

🧠 1. Diferença entre Transição e Animação

Tipo Quando Usar Característica

Transition → Quando um estado muda (ex: hover, click) → Depende de um evento do usuário

Animation → Quando algo deve acontecer

automaticamente (ex: banner, loader) Roda sozinha através dos keyframes

Transição só ocorre quando há mudança de estado.
Animação pode começar assim que a página carrega — ou quando você desejar.

⚙️ 2. Propriedade transition

A propriedade transition define como e quanto tempo uma mudança suave vai durar entre os estados CSS.

Exemplo básico:

button {

background: #0077ff;

color: white;

padding: 12px 24px;

border: none;

border-radius: 8px;

cursor: pointer;

transition: background 0.3s ease, transform 0.3s ease;

}

button:hover {

background: #005fd4;

transform: scale(1.05);

}

💡 Explicando:

● transition: propriedade duração tipo

● ease adiciona uma curva suave (você também pode usar linear, ease-in, ease-out, etc.)

💬 Você pode usar transition: all:

.box {

transition: all 0.4s ease-in-out;

}

👉 Assim, qualquer mudança (cor, posição, sombra) é suavizada automaticamente.

🎚️ 3. Propriedade transform

Com transform, é possível mover, girar, escalar ou inclinar elementos.

Efeito Exemplo Descrição

Mover → translate(x, y) → Move o elemento

Escalar → scale(x, y) → Aumenta ou reduz

Girar → rotate(ângulo) → Gira o elemento

Inclinar → skew(x, y) → Inclina nos eixos

Combinar → translate + rotate + scale → Combina efeitos

Exemplo:

.box:hover {

transform: translateY(-10px) rotate(5deg);

}

💥 Um pequeno movimento e rotação que dá “vida” ao layout.

🔁 4. Introdução às Animações (@keyframes)

As animações CSS permitem definir uma sequência de mudanças ao longo do tempo.

Estrutura:

@keyframes nome-da-animacao {

0% { /* estado inicial */ }

50% { /* meio do caminho */ }

100% { /* estado final */ }

}

Depois, você aplica com a propriedade animation:

.elemento {

animation: nome-da-animacao duração tipo repetição;

}

Exemplo básico — animação de pulso

@keyframes pulsar {

0% { transform: scale(1); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

}

button {

background: #0077ff;

border: none;

border-radius: 10px;

color: white;

padding: 14px 24px;

font-size: 16px;

cursor: pointer;

animation: pulsar 2s infinite ease-in-out;

}

💡 O botão cresce e volta ao normal suavemente, infinitamente.

🧩 5. Controlando o Ciclo das Animações

Propriedade Função

animation-name → Nome da animação (referência ao @keyframes)

animation-duration → Duração total

animation-timing-function → Tipo de transição (ease, linear, ease-in, etc.)

animation-delay → Espera antes de começar

animation-iteration-count → Quantas vezes roda (1, infinite)

animation-direction → Direção alternada (normal, reverse, alternate)

animation-fill-mode → Mantém o estilo final (forwards, backwards, both)

Exemplo:

.elemento {

animation: girar 3s linear infinite alternate;

}

💡 6. Exemplo Prático: Loader Animado

📄 HTML

📄 CSS

.loader {

width: 50px;

height: 50px;

border: 6px solid #ccc;

border-top-color: #0077ff;

border-radius: 50%;

animation: girar 1s linear infinite;

}

@keyframes girar {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

💥 Resultado: um ícone de carregamento girando, feito apenas com CSS!

🧱 7. Exemplo 2: Banner Deslizante

📄 HTML

<h1 class="slide">Bem-vindo ao Meu Site!</h1>

📄 CSS

.slide {

opacity: 0;

transform: translateY(50px);

animation: subir 1.5s ease forwards;

}

@keyframes subir {

0% {

opacity: 0;

transform: translateY(50px);

}

100% {

opacity: 1;

transform: translateY(0);

}

💡 O título “entra” de forma suave — perfeito para introduções de página.

🎨 8. Exemplo 3: Card 3D com Hover Animado

📄 HTML

<h3>Design Avançado</h3>

<p>Animações e interações modernas em CSS.</p>

</div>

📄 CSS

body {

background: linear-gradient(135deg, #a2d2ff, #cdb4db);

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

font-family: 'Poppins', sans-serif;

}

.card {

background: white;

border-radius: 16px;

padding: 40px;

text-align: center;

width: 280px;

box-shadow: 0 10px 25px rgba(0,0,0,0.1);

transition: transform 0.6s ease, box-shadow 0.6s ease;

}

.card:hover {

transform: rotateY(10deg) translateY(-10px);

box-shadow: 0 20px 40px rgba(0,0,0,0.2);

}

💎 Efeito: um cartão que flutua e gira levemente quando você passa o mouse — moderno e elegante.

⚡ 9. Dica Extra — Biblioteca de Efeitos Prontos

Se quiser começar rápido:
👉 Utilize Animate.css
Uma biblioteca fácil de usar com dezenas de efeitos prontos.

<h2 class="animate__animated animate__bounce">Olá Mundo!</h2>

🔥 10. Microinterações — Pequenos Detalhes, Grande Impacto

Pequenas animações ajudam o usuário a entender ações, como cliques e carregamentos.

Exemplos:

● Botões que deslizam ou pulsam ao clicar;

● Ícones que giram levemente;

● Formulários com campos que destacam ao entrar em foco;

● “Toasts” de notificação que aparecem suavemente.

Esses detalhes tornam o design mais humano e agradável.

🧠 11. O Que Você Aprendeu Hoje

✔️ Diferença entre transição e animação;
✔️ Uso das propriedades transition, transform e @keyframes;
✔️ Criar animações automáticas e controladas;
✔️ Adicionar dinamismo com hover e microinterações;
✔️ Criar loaders, banners e cartões animados;
✔️ Deixar o layout mais fluido e moderno com animações puras em CSS.

🚀 Próxima Aula: Sombreamento, Gradientes e Efeitos Visuais Avançados

Na próxima aula, você aprenderá a aplicar estilos de alto impacto visual, incluindo:

● Gradientes lineares e radiais;

● Sombras em texto e caixas;

● Efeitos de vidro fosco (backdrop-filter);

● Transições com transparência e luz;

● E como combinar tudo isso com o que você aprendeu até aqui.

💻 Aula 11 👉 Efeitos Visuais Avançados: Gradientes, Sombras e Estilo Translúcido.

🎯 Objetivos da Aula

● Aprender a aplicar gradientes lineares e radiais;

● Criar sombras suaves e realistas;

● Explorar misturas e transparências modernas;

● Implementar o efeito Glassmorphism (vidro fosco);

● Combinar gradientes, sombras e filtros para composições de alto nível.

🧠 1. Gradientes — Cor com Transição e Profundidade

Gradientes criam transições suaves de cor, dando movimento e estilo ao plano de fundo de um site, a botões e a caixas.

Se você quer se livrar do “fundo chapado” e passar uma sensação de profissionalismo e fluidez, use gradientes.

🔹 Linear Gradient

background: linear-gradient(direção, cor1, cor2);

Exemplo simples:

body {

background: linear-gradient(135deg, #74ABE2, #5563DE);

}

💡 135deg define o ângulo da transição.
Você também pode usar palavras:

background: linear-gradient(to right, #ff9a9e, #fad0c4);

👉 Transição da esquerda para a direita.

🔸 Gradientes com múltiplas cores:

background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);

💖 Cria um efeito de arco-íris moderno e suave.

🔹 Radial Gradient

Gradiente que parte do centro (ou outro ponto) para fora.

background: radial-gradient(circle, #89f7fe, #66a6ff);

👉 Perfeito para fundos de seções ou logotipos — cria profundidade natural.

💡 Dica Profissional

Combine gradientes + transparência:

background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(0,0,0,0.2));

Use rgba() (onde o “a” é o alfa, ou seja, a opacidade).

🌑 2. Sombras de Texto e Caixa (Text e Box Shadow)

🔸 Sombras em caixas (box-shadow):

box-shadow: deslocamentoX deslocamentoY desfoque cor;

Exemplo:

.card {

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);

}

💥 Isso cria profundidade — o elemento parece estar “flutuando”.

🔹 Sombras suaves e realistas:

Use múltiplas sombras para resultados mais naturais:

box-shadow:

0 2px 6px rgba(0, 0, 0, 0.1),

0 10px 20px rgba(0, 0, 0, 0.05);

💡 Camadas diferentes = sombra rica e difusa, mais realista.

🔸 Sombra em texto (text-shadow):

h1 {

text-shadow: 2px 4px 6px rgba(0,0,0,0.3);

}

💬 Boa prática: sombras bem leves, para melhorar contraste, não distrair.

🔮 3. Misturando Transparência e Filtros

Efeitos modernos de UI muitas vezes usam transparência e filtros visuais para criar uma estética futurista — como o “vidro leitoso” do iOS (Glassmorphism).

🔹 Propriedades populares:

Propriedade Efeito

opacity → Define transparência geral do elemento

backdrop-filter → Aplica filtro ao que está atrás do elemento

filter → Aplica filtro dentro do elemento (blur, saturate, etc.)

mix-blend-mode → Mistura de cores entre camadas

💎 4. Efeito Glassmorphism (Vidro Fosco)

📄 HTML

<h2>Glass UI</h2>

<p>Design moderno com transparência e luz.</p>

</div>

📄 CSS

body {

background: linear-gradient(135deg, #89f7fe, #66a6ff);

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

font-family: 'Poppins', sans-serif;

}

.glass {

background: rgba(255, 255, 255, 0.18);

border-radius: 16px;

padding: 40px;

backdrop-filter: blur(10px);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

border: 1px solid rgba(255, 255, 255, 0.3);

text-align: center;

color: white;

width: 300px;

}

💥 Resultado: um cartão translúcido, com fundo suavemente desfocado — um dos efeitos mais usados em dashboards e portfólios modernos.

🌈 5. Gradient Overlay (Sobreposição com Gradiente)

Você pode aplicar uma camada de gradiente sobre imagens, criando contraste e legibilidade no texto.

📄 CSS

.banner {

background:

linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2)),

url('imagem.jpg') center/cover no-repeat;

color: white;

padding: 100px 40px;

text-align: center;

}

💬 O gradiente “escurece” o topo da imagem, permitindo ler o texto por cima, sem edição no Photoshop.

💡 6. Combinação Prática — Card Premium

📄 HTML

<h3>Premium Experience</h3>

<p>Interface elegante com gradiente, sombra e profundidade.</p>

</div>

📄 CSS

body {

background: linear-gradient(135deg, #c9d6ff, #e2e2e2);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

font-family: 'Poppins', sans-serif;

}

.card {

width: 340px;

background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(240,240,240,0.8));

border-radius: 20px;

padding: 40px;

box-shadow:

0 8px 20px rgba(0, 0, 0, 0.15),

0 4px 10px rgba(255, 255, 255, 0.5) inset;

backdrop-filter: blur(10px);

text-align: center;

}

.card h3 {

background: linear-gradient(to right, #0077ff, #00c6ff);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

💎 Resultado:

● Fundo com gradiente suave, textura de vidro;

● Sombra dupla (interna e externa) criando relevo elegante;

● Título com texto em gradiente.

⚡ 7. Dicas Profissionais de Estilo

✅ Use sombras suaves e difusas;
✅ Combine gradientes de cores complementares (azul + lilás, rosa + laranja, etc.);
✅ Aplique filtros leves (blur(6px), brightness(1.1)) para dar brilho;
✅ Cuidado com o excesso — menos é mais!
✅ Sempre teste contraste e legibilidade.

🧠 8. O Que Você Aprendeu Hoje

✔️ Aplicar gradientes lineares e radiais com elegância;
✔️ Criar sombras realistas;
✔️ Usar transparência e filtros avançados;
✔️ Produzir o efeito “vidro fosco” moderno (Glassmorphism);
✔️ Misturar tudo com bom gosto para designs contemporâneos.

🚀 Próxima Aula: Variáveis e Funções no CSS (CSS Custom Properties)

Na próxima aula você vai aprender a deixar seu CSS inteligente e reutilizável com:

● Variáveis CSS (--minha-cor) e funções;

● Temas dinâmicos (modo claro/escuro);

● Cálculos automáticos com calc() e var();

● Criação de sistemas de design escaláveis — como os grandes sites usam.

💻 Aula 12 👉 Variáveis e Funções no CSS (CSS Custom Properties).

🎯 Objetivos da Aula

● Entender como funcionam as variáveis no CSS;

● Aprender a declarar e reutilizar variáveis (--nome);

● Utilizar a função var() corretamente;

● Criar temas claros e escuros com trocas dinâmicas de cores;

● Dominar funções utilitárias como calc(), clamp() e min();

● Deixar o código limpo, organizado e fácil de manter.

🧠 1. O Que São Variáveis no CSS

Variáveis permitem armazenar valores (como cores, tamanhos, espaçamentos) para reutilizar em todo o projeto.

💬 Sem variáveis, você repetiria o mesmo valor diversas vezes.
Com variáveis, você altera em um só lugar e tudo se atualiza.

🧩 2. Como Declarar e Usar Variáveis

As variáveis no CSS seguem esta sintaxe:

:root {

--nome-da-variavel: valor;

}

elemento {

propriedade: var(--nome-da-variavel);

}

● :root é o elemento raiz da página (equivalente a <html>).

● As variáveis declaradas nele ficam disponíveis globalmente.

🔹 Exemplo básico

:root {

--cor-primaria: #0077ff;

--cor-secundaria: #00c6ff;

--fonte-principal: 'Poppins', sans-serif;

--raio-borda: 10px;

}

button {

background: var(--cor-primaria);

color: white;

border-radius: var(--raio-borda);

font-family: var(--fonte-principal);

}

✅ Simples, elegante e centralizado.
Se mudar --cor-primaria: #ff0055, todo o site muda de cor automaticamente!

💡 3. Herança de Variáveis

As variáveis também herdam o escopo.
Você pode sobrescrever uma variável localmente em outro seletor:

:root {

--cor-texto: black;

}

.dark-mode {

--cor-texto: white;

}

p {

color: var(--cor-texto);

}

👉 Quando o elemento estiver dentro de .dark-mode, ele herda o novo valor.

Isso permite algo genial: mudar temas inteiros sem duplicar código!

🌗 4. Criando Temas Claro e Escuro

📄 HTML

<button id="toggle">Alternar Tema</button>

<h1>Bem-vindo!</h1>

<p>Aprenda CSS com estilo e eficiência.</p>

</body>

📄 CSS

:root {

--bg-color: #ffffff;

--text-color: #222222;

--accent-color: #0077ff;

}

body {

background: var(--bg-color);

color: var(--text-color);

font-family: 'Poppins', sans-serif;

transition: background 0.3s, color 0.3s;

}

button {

background: var(--accent-color);

border: none;

color: white;

padding: 10px 20px;

border-radius: 8px;

cursor: pointer;

}

/* Tema Escuro */

body.dark {

--bg-color: #1a1a1a;

--text-color: #f5f5f5;

--accent-color: #00c6ff;

}

📄 JavaScript (para alternar tema)

document.getElementById('toggle').onclick = () => {

document.body.classList.toggle('dark');

};

💎 Resultado:
Clique no botão e o site alterna entre tema claro e escuro instantaneamente — usando apenas variáveis CSS e uma pequena linha de lógica.

📐 5. Funções Úteis do CSS

As funções permitem manipular valores dinamicamente.
Vamos ver as mais utilizadas e poderosas.

🔹 calc() — Fazendo Cálculos no CSS

Serve para somar, subtrair, multiplicar ou dividir valores de diferentes unidades.

.container {

width: calc(100% - 40px);

height: calc(100vh - 100px);

}

💬 Ideal para ajustar espaçamentos e criar layouts elásticos.

⚠️ Atenção: espaço entre operadores é obrigatório (calc(100%-10px) não funciona).

🔹 min() e max()

Com essas funções, o CSS escolhe automaticamente o menor ou maior valor entre os parâmetros.

h1 {

font-size: min(8vw, 36px);

}

💡 O título cresce com a tela até o limite de 36px.

🔹 clamp() — Controle Total

Combina o mínimo, o ideal e o máximo valor em uma única linha:

h2 {

font-size: clamp(1.2rem, 3vw, 2.4rem);

}

💬 Fonte adaptável a qualquer tela: nunca muito pequena nem grande demais.

⚙️ 6. Exemplo Prático — Design Dinâmico com Variáveis e Funções

📄 HTML

<h1>Curso CSS Master</h1>

<p>Flexível, moderno e inteligente com variáveis e funções CSS.</p>

<button>Clique Aqui</button>

</div>

📄 CSS

:root {

--cor-base: #0077ff;

--cor-bg: #f0f5fa;

--cor-texto: #222;

--padding: 20px;

--radius: 12px;

--font-titulo: clamp(1.5rem, 4vw, 2.5rem);

}

body {

font-family: 'Poppins', sans-serif;

background: var(--cor-bg);

color: var(--cor-texto);

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.container {

background: white;

padding: var(--padding);

border-radius: var(--radius);

box-shadow: 0 8px 20px rgba(0,0,0,0.1);

text-align: center;

width: clamp(280px, 50%, 600px);

}

h1 {

font-size: var(--font-titulo);

color: var(--cor-base);

}

button {

background: var(--cor-base);

color: white;

border: none;

border-radius: var(--radius);

padding: calc(var(--padding) / 2);

font-weight: 600;

cursor: pointer;

transition: background 0.3s;

}

button:hover {

background: color-mix(in srgb, var(--cor-base), white 20%);

}

💥 Resultado:

Um layout escalável e fluido, com tamanhos e cores definidos dinamicamente.

Basta mudar uma variável e o design inteiro se adapta!

🧩 7. CSS Custom Properties + JavaScript (Extra)

Você pode alterar variáveis via JS — em tempo real:

document.documentElement.style.setProperty('--cor-base', '#ff4f81');

💡 Isso permite customização ao vivo, como trocas de tema e sliders de cor — recurso muito usado em painéis de controle e editores online.

⚡ 8. Dicas Profissionais

✅ Prefixe suas variáveis para organização (--clr-, --sz-, --sp- etc.);
✅ Agrupe-as em seções (:root, .tema-escuro, .tema-claro);
✅ Use clamp() para fontes e margens fluidas;
✅ Combine com calc() para layouts elásticos;
✅ Separe um arquivo só para variáveis — estilo “design system”.

🧠 9. O Que Você Aprendeu Hoje

✔️ Conceito e sintaxe das variáveis CSS;
✔️ Uso de var() para reaproveitar valores;
✔️ Criação de temas dinâmicos (claro/escuro);
✔️ Utilização de funções poderosas: calc(), clamp(), min(), max();
✔️ Como deixar o CSS flexível e escalável com Custom Properties.

💬 Próximo Módulo:

● Grid + Flexbox + Media Queries;

● Cabeçalho fixo, menu lateral e área de conteúdo fluida;

● Layout totalmente adaptável e interativo com CSS moderno.

📚 Módulo 5 → Layout e Posicionamento.

💻 Aula 13: 👉 Media Queries e design responsivo.

💻 Aula 14: 👉 Variáveis CSS e modo escuro.

💻 Aula 15: 👉 Organização, manutenção e integração com JavaScript.

Módulo 5 Acesse Aqui

📚 Adquira Nosso Livro Impresso

A venda de livros e materiais didáticos é destinada exclusivamente à manutenção e expansão da Academy Code, permitindo que mais jovens tenham acesso à educação tecnológica de qualidade e preparação para o mercado de trabalho.

🛒 Adquira nossos livros