📚Módulo 5

⚙️ Módulo 5 — Formatação e Design Visual

🎯 Objetivos da Aula

● Aprender a aplicar cores com CSS (nomes, RGB, HEX, HSL e Gradientes);

● Personalizar fontes e textos com propriedades tipográficas;

● Entender espaçamento interno e externo (margin, padding e box-model);

● Criar harmonia visual com cores, contrastes e legibilidade;

● Aplicar boas práticas de design visual moderno.

💻 Aula 13 👉 Formatação Visual Avançada com CSS: Cores, Fontes e Espaçamento.

🎨 1. Trabalhando com Cores no CSS

As cores são definidas usando diferentes formatos de valor.
Você pode escolher o método que facilita sua leitura e controle de tonalidade.

🚀 Formas de definir cores:

Método Exemplo Descrição

Nome da cor → color: red; → Lista de cores pré-definidas (ex. red, blue, black).

RGB → color: rgb(255, 0, 0); → Define a cor usando os valores de Vermelho, Verde e Azul.

RGBA → color: rgba(255, 0, 0, 0.5); → Igual ao RGB, mas com transparência (0 a 1).

HEX → color: #ff0000; → Representa cores em formato hexadecimal (muito usado).

HSL → color: hsl(120, 100%, 50%); → Define cores por matiz, saturação e luminosidade.

💡 Exemplo prático:

h1 {

color: #0077cc;

}

p {

color: rgba(0, 0, 0, 0.8);

}

body {

background-color: hsl(200, 30%, 95%);

}

🌈 2. Degradês (Gradients)

Você pode criar transições suaves de cor usando linear-gradient() ou radial-gradient().

💡 Exemplo:

header {

background: linear-gradient(to right, #0066ff, #33ccff);

color: white;

padding: 20px;

text-align: center;

}

🔹 to right → o gradiente vai da esquerda para a direita.
🔹 Pode usar até 3, 4 ou mais cores!

✍️ 3. Trabalhando com Fontes no CSS

A leitura é a base da comunicação visual. O CSS oferece total controle sobre fontes, tamanhos, estilos e espaçamento do texto.

📜 Propriedades básicas:

Propriedade Função

font-family → Define o tipo de fonte.

font-size → Controla o tamanho do texto.

font-weight → Define espessura (normal, bold, 400‑900).

font-style → Define estilo (normal, italic, oblique).

line-height → Define o espaçamento entre linhas.

text-align → Alinhamento do texto (left, center, right, justify).

💡 Exemplo:

body {

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

font-size: 16px;

color: #333;

line-height: 1.6;

}

h1 {

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

font-weight: 700;

}

🔹 Tipos comuns de fontes seguras: Arial, Verdana, Georgia, Tahoma.
🔹 É possível combinar várias: font-family: 'Roboto', Helvetica, sans-serif;

🧱 4. Tamanhos de Fonte e Unidades de Medida

Unidade Significado Exemplo

px → Pixels fixos → font-size: 16px;

% → Relativo ao tamanho do elemento pai → font-size: 120%;

em → Relativo à fonte do elemento pai → font-size: 1.5em;

rem → Relativo à fonte do elemento raiz (html) → font-size: 2rem;

vh / vw → Relativos à altura/largura da tela → font-size: 5vw;

💬 Boas práticas:

Prefira em ou rem para responsividade e escalabilidade.

🔠 5. Importando Fontes do Google Fonts

Você pode usar milhares de fontes gratuitas do Google Fonts.

💡 Passo 1: vá até fonts.google.com

Escolha uma fonte e copie o link de importação.

💡 Passo 2: adicione no <head>:

💡 Passo 3: aplique no CSS:

body {

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

}

✅ Simples, bonito e profissional!

🌍 6. Espaçamento — Margens, Preenchimentos e Box Model

O Box Model é a base visual do CSS:
cada elemento é uma “caixa” que possui margem, borda, padding e conteúdo interno.

┌────────────────────────────┐

│ margin │ ← espaço externo

│ ┌────────────────────────┐ │

│ │ border │ │

│ │ ┌────────────────────┐ │ │

│ │ │ padding │ │ │ ← espaço interno

│ │ │ ┌────────────────┐ │ │ │

│ │ │ │ conteúdo │ │ │ │

│ │ │ └────────────────┘ │ │ │

│ │ └────────────────────┘ │ │

│ └────────────────────────┘ │

└────────────────────────────┘

🚀 Margem (margin)

Define o espaço fora da borda de um elemento.

section {

margin-top: 20px;

margin-bottom: 30px;

}

🧩 Padding

Define o espaço dentro do elemento, entre o conteúdo e a borda.

article {

padding: 15px;

}

🔲 Shorthand (atalhos)

● margin: 10px 20px 15px 5px; → (top, right, bottom, left)

● padding: 20px 10px; → (vertical, horizontal)

🔘 7. Bordas, Sombras e Arredondamentos

💡 Bordas:

div {

border: 2px solid #0077cc;

border-radius: 10px;

}

💡 Sombras:

div {

box-shadow: 2px 2px 10px rgba(0,0,0,0.2);

}

💬 Use com moderação — sombras sutis criam profundidade e destacam seções.

🧩 8. Espaçamento e Hierarquia Visual

Espaçamento adequado cria clareza e respiração visual.
Evite páginas “apertadas”.

💡 Dica prática:

● Use espaçamentos proporcionais: por exemplo, 1.5rem entre parágrafos.

● Mantenha margens consistentes entre seções.

● Crie “blocos de leitura” com respiro visual.

🧠 9. Exemplo Completo – Página com Formatação Visual Avançada

<!DOCTYPE html>

<head>

<title>Estilo Visual - Aula 13</title>

<style>

body {

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

background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);

color: #333;

margin: 0;

line-height: 1.6;

}

header {

background-color: #0077cc;

color: white;

text-align: center;

padding: 20px;

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

}

main {

max-width: 900px;

margin: 40px auto;

background: #fff;

padding: 30px;

border-radius: 10px;

box-shadow: 0 4px 15px rgba(0,0,0,0.08);

}

h1, h2 {

color: #0077cc;

margin-bottom: 15px;

}

p {

margin-bottom: 20px;

}

footer {

text-align: center;

background: #222;

color: #ddd;

padding: 15px;

margin-top: 40px;

}

@media (max-width: 600px) {

main {

margin: 20px;

padding: 20px;

}

</style>

</head>

<body>

<h1>Formatação Visual Avançada</h1>

</header>

<main>

<h2>Fontes e Cores</h2>

<p>Utilize cores harmoniosas e fontes legíveis. Um bom contraste garante maior conforto na leitura.</p>

<h2>Espaçamento e Hierarquia</h2>

<p>O espaçamento entre blocos cria ritmo visual. Elementos bem espaçados organizam e guiam o olhar do leitor.</p>

</main>

</footer>

</body>

</html>

✅ Layout moderno, legível e adaptável — usando apenas CSS básico.
✅ Gradiente, sombras, fontes e espaçamento transformaram o design em algo profissional.

💻 Exercício Prático 13

Crie um arquivo estilo_visual.html contendo:

1. Um layout básico com cabeçalho, conteúdo e rodapé;

2. Uma paleta de cores harmônica (use #HEX ou HSL);

3. Importação de uma fonte do Google Fonts;

4. Aplicação de margens, paddings e sombras;

5. Ajuste de responsividade (mínimo @media para 768px).

✅ Desafio Extra:
Use gradient no fundo e crie botões com efeito hover (:hover com mudança de cor ou sombra).

💬 Conclusão da Aula

Hoje você aprendeu:

● Como aplicar cores, fontes, espaçamentos e sombras com CSS;

● A importância da hierarquia visual e harmonia cromática;

● Como importar e usar fontes profissionais;

A construir páginas com legibilidade, elegância e consistência visual.

🔜 Próxima Aula:

Na Aula 14, você aprenderá Interatividade e Pseudo-classes do CSS —
como criar efeitos visuais dinâmicos (hover, active, focus) e elementos interativos sem precisar de JavaScript.

💻 Aula 14 👉 Interatividade e Pseudo-classes do CSS: Hover, Active, Focus e Muito Mais.

🎯 Objetivos da Aula

● Entender o que são pseudo-classes no CSS;

● Usar estilos condicionais com :hover, :active e :focus;

● Criar efeitos dinâmicos em botões, links e formulários;

● Trabalhar com pseudo-elementos (::before, ::after, ::first-letter);

● Aprender boas práticas de interatividade visual e acessibilidade.

🧩 1. O que são Pseudo-classes

As pseudo-classes permitem definir estilos diferentes conforme o estado do elemento (por exemplo, quando o mouse passa por cima, quando é clicado ou quando está selecionado).

💡 Sintaxe básica:

seletor:pseudo-classe {

propriedade: valor;

}

🧠 Principais pseudo-classes interativas

Pseudo-classe Descrição

:hover → Quando o usuário passa o mouse sobre o elemento.

:active → Quando o elemento está sendo clicado (pressionado).

:focus → Quando o elemento recebe foco (por teclado ou clique).

:visited → Quando um link já foi acessado.

:disabled → Para inputs, botões ou campos inativos.

🧭 2. Exemplo prático: Links interativos

<a href="#">Clique aqui</a>

a {

color: #0077cc;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: #003366; /* muda a cor ao passar o mouse */

text-decoration: underline;

}

a:active {

color: #ff9900; /* muda quando clicado */

}

a:visited {

color: #800080; /* já visitado */

}

🔹 Essa sequência cria feedback visual imediato ao usuário.
🔹 A ordem correta deve sempre ser usada:

a:link → a:visited → a:hover → a:active

(para evitar conflitos quando o navegador aplica prioridade).

🎨 3. Botões com efeitos de interação

<button>Enviar</button>

button {

background-color: #0077cc;

border: none;

color: #fff;

padding: 12px 20px;

font-size: 16px;

border-radius: 5px;

transition: all 0.3s ease;

cursor: pointer;

}

button:hover {

background-color: #005fa3;

transform: scale(1.05);

}

button:active {

background-color: #004c80;

transform: scale(0.98);

}

🧠 Destaques técnicos:

● transition → anima suavemente mudanças de propriedades;

● cursor: pointer → indica clicabilidade;

● transform: scale() → cria efeito de "zoom" no hover.

🔍 4. Campos de formulário com foco (:focus)

A pseudo-classe :focus é essencial para melhorar a usabilidade e acessibilidade, mostrando ao usuário onde ele está digitando.

💡 Exemplo:

input {

padding: 10px;

border: 2px solid #bbb;

border-radius: 5px;

outline: none;

font-size: 14px;

}

input:focus {

border-color: #0077cc;

box-shadow: 0 0 5px #0077cc;

}

🔹 Isso cria destaque visual e melhora a navegação com teclado (Tab).

🔹 O atributo outline: none remove o contorno padrão do navegador.

⚙️ 5. Pseudo-elementos: ::before e ::after

Os pseudo-elementos criam conteúdo adicional antes ou depois do conteúdo real de um elemento — sem alterar o HTML.

💡 Exemplo prático:

<h2>Aprendendo CSS</h2>

h2::before {

content: "★ ";

color: gold;

}

h2::after {

content: " ★";

color: gold;

}

🔹 O texto “★” não existe no HTML, mas aparece visualmente.
🔹 Muito usado para ícones, separadores e decorações.

⚙️Outros pseudo-elementos úteis

Pseudo-elemento Descrição

::first-letter → Estiliza apenas a primeira letra.

::first-line → Estiliza a primeira linha de texto.

::selection → Estiliza o destaque quando o usuário seleciona com o mouse.

💡 Exemplo:

p::first-letter {

font-size: 2em;

color: #0077cc;

font-weight: bold;

}

p::selection {

background: #0077cc;

color: white;

}

🔹 Isso cria uma estética elegante e dá destaque visual na leitura.

🧠 7. Transições e efeitos suaves (com transition)

Você pode animar mudanças visuais de forma fluida, criando efeitos modernos e agradáveis.

💡 Exemplo:

.card {

background: #fff;

border-radius: 10px;

padding: 20px;

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

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

}

.card:hover {

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

🔹 Muito usado para cards de produtos, projetos ou portfólios.
🔹 Pode combinar várias animações no mesmo transition.

🧩 8. Agrupando Pseudo-classes: Vários estados

Você pode combinar pseudo-classes em um mesmo seletor:

button:hover,

button:focus {

background-color: #005fa3;

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

}

💬 Isso garante a mesma aparência tanto para o hover quanto para o foco —
(técnica útil para acessibilidade com teclado).

🧱 9. Exemplo Completo — Página Interativa com Efeitos CSS

<!DOCTYPE html>

<head>

<title>Pseudo-classes e Interação</title>

<style>

body {

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

background: linear-gradient(to bottom, #e6f0ff, #fff);

margin: 0;

padding: 40px;

}

h1 {

text-align: center;

color: #0077cc;

}

a {

color: #0077cc;

text-decoration: none;

font-weight: bold;

transition: 0.3s;

}

a:hover {

color: #003366;

text-decoration: underline;

}

.card {

background: white;

border-radius: 10px;

padding: 20px;

width: 280px;

margin: 20px auto;

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

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

}

.card:hover {

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

button {

background-color: #0077cc;

border: none;

color: white;

padding: 12px 20px;

margin-top: 10px;

border-radius: 5px;

cursor: pointer;

transition: all 0.3s ease;

}

button:hover, button:focus {

background-color: #005fa3;

transform: scale(1.05);

}

input {

display: block;

padding: 8px;

margin: 10px 0;

width: 90%;

border-radius: 5px;

border: 2px solid #ccc;

outline: none;

transition: border-color 0.3s ease;

}

input:focus {

border-color: #0077cc;

box-shadow: 0 0 8px rgba(0,119,204,0.3);

}

footer {

text-align: center;

color: #888;

margin-top: 40px;

}

</style>

</head>

<body>

<h1>Efeitos e Interação CSS</h1>

<p>Passe o mouse sobre este card para ver o efeito!</p>

<a href="#">Saiba mais</a>

<button>Enviar</button>

</div>

</footer>

</body>

</html>

✅ Combina :hover, :focus, transition, e box-shadow.
✅ Responsivo, moderno e totalmente acessível.

💻 Exercício Prático 14

Crie um arquivo interatividade.html com:

1. Um botão com efeitos de hover, focus e active;

2. Um campo de formulário que muda o estilo com :focus;

3. Um link que altera cor e sublinhado no :hover;

4. Um mini card com sombra e movimento ao passar o mouse;

5. (Desafio Extra) use ::before ou ::after para adicionar um ícone decorativo aos títulos.

💬 Conclusão da Aula

Hoje você aprendeu:

● O que são pseudo-classes e pseudo-elementos;

● Como criar efeitos de hover, active e focus;

● A adicionar animações suaves com transition;

● A criar elementos totalmente interativos só com CSS, sem JS!

🔜 Próxima aula:

Na Aula 15, você vai concluir o módulo com Animações e Efeitos Avançados no CSS, aprendendo a criar movimento, transições complexas e interatividade profissional.

💻 Aula 15 👉 Animações e Efeitos Avançados no CSS: Transform, Transition e Keyframes.

🎯 Objetivos da Aula

● Entender como funcionam transições e transformações CSS;

● Aplicar movimento e fluidez com transform e transition;

● Criar animações personalizadas com @keyframes;

● Compreender tempo, direção e ciclo das animações;

● Aprender boas práticas para performance e moderação visual.

🧩 1. Revisão rápida: Transition

A propriedade transition serve para criar movimentos suaves em alterações de estilo, como cor, tamanho, sombra, opacidade e posição.

💡 Sintaxe:

transition: propriedade duração função-de-tempo atraso;

Exemplo:

button {

background: #0077cc;

color: white;

padding: 10px 20px;

border-radius: 5px;

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

}

button:hover {

background: #005fa3;

transform: scale(1.1);

}

🔹 ease – movimento suave.

🔹 linear – movimento uniforme.

🔹 ease-in, ease-out, ease-in-out – suavizações em diferentes pontos da animação.

💫 2. Transformações com transform

Com transform, podemos mudar o formato, tamanho, posição ou rotação de elementos.

Usado isoladamente

ou combinado com transition ou animation.

Função Descrição Exemplo

scale(x, y) → Escala o tamanho → transform: scale(1.2);

rotate(ângulo) → Rotaciona o elemento → transform: rotate(45deg);

translate(x, y) → Move o elemento → transform: translate(50px, 0);

skew(x, y) → Inclina o elemento → transform: skew(10deg, 5deg);

💡 Exemplo prático:

.card:hover {

transform: scale(1.1) rotate(3deg);

transition: transform 0.3s ease-in-out;

}

🔹 Pequenas rotações e escalas criam um efeito dinâmico sem exagero.
🔹 Combine transition e transform para o efeito mais natural possível.

🎨 Criando Animações com @keyframes

@keyframes é o coração das animações no CSS — ela define etapas (quadros) de um movimento, que são aplicadas a um elemento com animation.

💡 Exemplo básico:

@keyframes moverCaixa {

0% { transform: translateX(0px); }

50% { transform: translateX(100px); background-color: #0077cc; }

100% { transform: translateX(0px); }

}

Aplicando ao elemento:

div {

width: 100px;

height: 100px;

background: #005fa3;

animation: moverCaixa 2s ease infinite;

}

🔹 animation une tudo:
animation: nome duração função tempo-para-iniciar quantidade-de-loops;

🧠 4. Propriedades avançadas da animação

Propriedade Função

animation-name → Nome do @keyframes.

animation-duration → Duração (em segundos).

animation-timing-function → Suavização do movimento (ease, linear, etc.).

animation-delay → Tempo antes de começar.

animation-iteration-count → Quantas vezes se repete (1, 3, infinite).

animation-direction → Sentido do ciclo (normal, reverse, alternate).

animation-fill-mode → Estado final (none, forwards, backwards, both).

💡 Exemplo completo:

@keyframes fade {

from { opacity: 0; }

to { opacity: 1; }

}

.box {

width: 150px;

height: 150px;

background: #0077cc;

animation-name: fade;

animation-duration: 2s;

animation-fill-mode: forwards;

}

✅ Dica: combine animation-delay com múltiplos elementos para efeitos em sequência.

💡 Exemplo — Animação de Pulso

@keyframes pulsar {

0% { transform: scale(1); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

}

.botao-pulso {

background: #0077cc;

color: #fff;

padding: 15px 25px;

border: none;

border-radius: 5px;

cursor: pointer;

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

}

🔹 Perfeito para chamar atenção a botões ou chamadas de ação (CTAs).

🧩 6. Exemplo — Animação de Carga (Loading Spinner)

.spinner {

width: 80px;

height: 80px;

border: 8px solid #eee;

border-top: 8px solid #0077cc;

border-radius: 50%;

animation: girar 1s linear infinite;

}

@keyframes girar {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

🔹 Resultado: círculo girando indefinidamente — típico indicador de “carregando”.

💡 Exemplo — Texto com Fade e Slide

@keyframes slideFade {

0% {

opacity: 0;

transform: translateY(30px);

}

100% {

opacity: 1;

transform: translateY(0);

}

.titulo {

font-size: 2rem;

color: #333;

text-align: center;

animation: slideFade 1.2s ease forwards;

}

💬 Use esse tipo de animação para títulos, seções ou cards que aparecem conforme o usuário rola a página (scroll animations básicas).

⚙️ 8. Efeitos combinados com Hover + Animation

💡 Exemplo:

.card {

width: 200px;

height: 200px;

background: #e6f0ff;

border-radius: 10px;

transition: transform 0.5s;

}

.card:hover {

animation: brilho 1.5s infinite alternate;

}

@keyframes brilho {

from { box-shadow: 0 0 5px #0077cc; }

to { box-shadow: 0 0 20px #33ccff; }

}

🔹 O hover ativa a animação e cria um efeito de brilho pulsante.

🚀 9. Efeitos Modernos e Boas Práticas

✨ Boas práticas:

1. Use movimento com propósito — não exagere.

2. Prefira pequenas transições sobre grandes animações.

3. Evite animações constantes que causem distração.

4. Sempre teste performance em dispositivos móveis.

5. Use will-change para otimização quando necessário (ex.: will-change: transform;).

💬 Dica adicional: para animações repetitivas curtas, use transition;
para movimentos contínuos ou complexos, use @keyframes.

💻 10. Exemplo Completo — Página com Animações e Efeitos

<!DOCTYPE html>

<head>

<title>Aula 15 - Animações CSS</title>

<style>

body {

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

background: linear-gradient(to bottom, #f7fbff, #e1efff);

margin: 0;

padding: 0;

text-align: center;

}

header {

background: #0077cc;

color: white;

padding: 20px;

animation: slideDown 1s ease-out;

}

@keyframes slideDown {

from { transform: translateY(-50px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

}

.main {

padding: 40px 20px;

}

.card {

background: white;

border-radius: 10px;

width: 250px;

margin: 20px auto;

padding: 20px;

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

transition: transform 0.3s ease;

}

.card:hover {

transform: scale(1.05);

animation: brilho 1.5s infinite alternate;

}

@keyframes brilho {

0% { box-shadow: 0 0 10px #0077cc; }

100% { box-shadow: 0 0 25px #33ccff; }

}

button {

background: #0077cc;

color: white;

border: none;

padding: 10px 20px;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

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

}

@keyframes pulsar {

0% { transform: scale(1); }

50% { transform: scale(1.08); }

100% { transform: scale(1); }

}

footer {

background: #333;

color: #ccc;

padding: 15px;

margin-top: 40px;

animation: fadeIn 2s ease;

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

</style>

</head>

<body>

<h1>Animações e Efeitos CSS</h1>

</header>

<h2>CSS Animado</h2>

<p>Aprenda a criar efeitos visuais incríveis apenas com CSS!</p>

<button>Começar</button>

</div>

</section>

</footer>

</body>

</html>

✅ Layout leve, moderno e com animações harmônicas.

✅ Combinação de transition, transform e @keyframes.

💻 Exercício Prático 15

Crie um arquivo chamado animacoes_css.html com:

1. Um elemento animando com @keyframes (ex.: rotação, fade, movimento ou escala);

2. Um botão animado com :hover e transition;

3. Um título com entrada suave usando animation-delay;

4. Ao menos duas animações combinadas (por exemplo: aparecer e mover);

5. (Desafio Extra) Crie uma animação de slider ou carregamento personalizada.

💬 Conclusão da Aula

Hoje você aprendeu:

● A usar transformações e transições para efeitos suaves;

● A criar movimento, entrada e ciclos com @keyframes;

● A combinar efeitos de hover e animação;

● A entender performance e boas práticas visuais.

Você agora domina as bases completas do HTML e CSS moderno 🎉

🏁 Encerramento do Módulo: Parabéns! 🎉

Você percorreu um caminho completo — do HTML básico até o CSS moderno e responsivo com animações.

A partir daqui, você está pronto para criar sites profissionais e dinâmicos.

📚 Adquira Nosso Livro Impresso

A venda dos livros e materiais didáticos é utilizada exclusivamente para sustentar e expandir o projeto, possibilitando que mais jovens tenham acesso a educação de qualidade e preparo para o mercado de trabalho.