📚Módulo 2

🎨 Fundamentos do CSS

💻 Aula 4 👉 Tipografia, Cores e Fundos Avançados.

🎯 Objetivos da Aula

● Entender a importância da tipografia no design;

● Aprender as principais propriedades de fonte e texto no CSS;

● Explorar o uso de cores, gradientes e transparências;

● Usar fundos avançados (múltiplos backgrounds, imagens e repetição);

● Criar um projeto prático: página de perfil elegante.

🧠 1. O Poder da Tipografia no CSS

A tipografia é responsável por 90% da experiência visual de um site.
É ela que define a identidade visual, a legibilidade e o estilo.

Imagine o CSS como a "voz" do seu conteúdo. Uma escolha errada de fonte ou espaçamento, e a mensagem perde força.

🧩 As principais propriedades tipográficas:

Propriedade Função

font-family → Define a fonte usada

font-size → Tamanho da fonte

font-weight → Espessura da fonte (normal, bold, 300, 700 etc.)

font-style → Define estilos como itálico

text-transform → Transforma texto (uppercase, lowercase, capitalize)

text-decoration → Sublinhado, linha sobre o texto etc.

line-height → Altura da linha (espaçamento vertical entre linhas)

letter-spacing → Espaçamento entre letras

word-spacing → Espaçamento entre palavras

text-shadow → Cria sombras no texto

🎨 Exemplo de uso:

h1 {

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

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

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

}

💬 Isso cria um título elegante, com letras maiúsculas e uma leve sombra que dá profundidade visual.

🔤 2. Usando Fontes Personalizadas

Nem todas as fontes estão instaladas no computador do usuário.
Por isso, usamos fontes web, que vêm de servidores da internet — geralmente do Google Fonts.

Exemplo:

No seu index.html:

No style.css:

body {

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

}

💡 Usar Google Fonts é gratuito, rápido e personaliza o design de forma profissional.

🎨 3. Cores no CSS

O CSS permite trabalhar com cores em diferentes formatos.
Você já viu hex e rgb, mas agora vamos detalhar:

🔹 Formatos de cores:

Tipo Exemplo

Nomeado → red, blue, green

Hexadecimal → #ff0000

RGB → rgb(255, 0, 0)

RGBA (com transparência) → rgba(255, 0, 0, 0.5)

HSL → hsl(0, 100%, 50%) (Hue, Saturation, Lightness)

🔸 Dica profissional — Cores suaves e modernas

Use tonalidades neutras com cores vibrantes de destaque, por exemplo:

body {

background-color: #f7f9fb;

color: #333;

}

a {

color: #0a84ff;

}

💙 Tente evitar o preto puro (#000000) e o branco puro (#ffffff) — tons cinzas suaves e brancos quebrados tornam a leitura mais agradável.

🌈 4. Gradientes (Degradê)

Gradientes são transições suaves entre duas ou mais cores.
Existem lineares e radiais.

Exemplo linear:

body {

background: linear-gradient(135deg, #6a11cb, #2575fc);

}

Exemplo radial:

div {

background: radial-gradient(circle, #ff758c, #ff7eb3);

}

💡 Você pode usar o gradiente como fundo de qualquer elemento — inclusive botões!

🖼️ 5. Fundos Avançados com background

O CSS permite misturar imagens, gradientes e cores em camadas de fundo.

🔹 Fundamento:

body {

background-repeat: no-repeat;

background-size: cover;

background-position: center;

}

Explicando:

● no-repeat: evita repetição da imagem

● cover: cobre todo o espaço visível (sem distorcer)

● center: centraliza o ponto focal da imagem

🔸 Múltiplos Fundos

Podemos combinar várias camadas:

body {

background:

linear-gradient(135deg, rgba(0,0,0,0.6), rgba(255,255,255,0.2)),

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

}

💡 O gradiente fica por cima da imagem, criando um efeito de sobreposição elegante (muito usado em hero sections e landing pages).

🔸 Fundos Fixos (Parallax básico)

section {

background-attachment: fixed;

background-size: cover;

background-position: center;

}

👉 Isso faz o fundo ficar fixo durante o scroll, criando um efeito moderno de parallax simples.

💡 6. Texturas, Transparência e Overlays

Você pode combinar transparências (rgba) com camadas de cor e imagem para criar contraste.

.banner {

background-image:

linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),

url('banner.jpg');

background-size: cover;

background-position: center;

color: #fff;

}

O gradiente preto semi-transparente escurece a imagem e melhora a leitura do texto em cima — uma técnica de design muito usada.

🧩 7. Projeto Prático — Página de Perfil Elegante

Hora de construir algo completo e bonito. 💅

📄 index.html

<!DOCTYPE html>

<head>

<title>Perfil Elegante</title>

</head>

<body>

<h1>Mariana Duarte</h1>

<p class="cargo">Designer UX/UI ✨</p>

<p class="bio">Apaixonada por design centrado no usuário e interfaces que contam histórias.</p>

<button>Ver Portfólio</button>

</section>

</body>

</html>

📄 style.css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

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

color: #333;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.perfil {

background: linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.9));

padding: 40px;

border-radius: 16px;

text-align: center;

width: 320px;

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

}

.foto {

background-size: cover;

background-position: center;

width: 120px;

height: 120px;

border-radius: 50%;

margin: 0 auto 20px auto;

border: 4px solid #0077ff;

}

h1 {

color: #0077ff;

font-size: 24px;

font-weight: 600;

margin-bottom: 5px;

}

.cargo {

font-size: 14px;

color: #666;

margin-bottom: 15px;

}

.bio {

font-size: 14px;

color: #444;

line-height: 1.5;

margin-bottom: 25px;

}

button {

background: linear-gradient(135deg, #0077ff, #00b4ff);

color: white;

border: none;

padding: 10px 24px;

border-radius: 8px;

font-size: 14px;

font-weight: 600;

cursor: pointer;

transition: transform .2s ease, background .3s ease;

}

button:hover {

transform: scale(1.05);

background: linear-gradient(135deg, #005fd4, #0099dd);

}

💎 Resultado:
Um cartão de perfil com:

● Tipografia moderna, leve e equilibrada;

● Fundo em degradê elegante;

● Foto circular com borda colorida;

● Botão degradê com transição suave.

Um layout visualmente harmônico e refinado — ideal para portfólios e perfis profissionais.

🧠 8. O Que Você Aprendeu Hoje

✔️ Usar tipografia de forma eficiente e profissional;
✔️ Aplicar fontes externas (Google Fonts);
✔️ Trabalhar com cores, gradientes e transparências;
✔️ Manipular fundos com imagens e múltiplas camadas;
✔️ Criar uma página visual elegante e equilibrada.

🚀 Próxima Aula: Bordas, Sombreamentos e Efeitos Visuais

Na próxima aula você vai aprender:

● A customizar bordas, cantos e contornos criativos;

● Usar sombras de caixas (box-shadow) com estilo moderno;

● Aplicar efeitos visuais como brilho, transições suaves e blur;

● E criar um exemplo prático de card interativo com sombra flutuante.

💻 Aula 5 👉 Bordas, Sombreamentos e Efeitos Visuais.

🎯 Objetivos da Aula

● Dominar o uso de bordas (radius, estilo, gradiente, dupla);

● Aprender a aplicar sombras suaves e realistas com box-shadow;

● Usar text-shadow para tipografia;

● Trabalhar com filtros (blur, brilho, contraste);

● Criar um projeto prático de card interativo com sombra flutuante.

🧱 1. Bordas no CSS: muito além do básico

As bordas servem para destacar e limitar elementos, mas também podem ser parte decorativa e criativa do design.

💡 Propriedades básicas:

Propriedade Função

border-width Espessura da borda

border-style Tipo de linha (solid, dotted, dashed, double, groove, etc.)

border-color Cor da borda

border-radius Define o arredondamento dos cantos

🧩 Exemplo básico:

div {

border: 3px solid #0077ff;

border-radius: 8px;

}

💬 Isso cria uma borda azul simples, com cantos suavemente arredondados.

🔸 Bordas individuais

Você pode personalizar cada lado:

div {

border-top: 2px solid #0077ff;

border-right: 4px dotted #ff0077;

border-bottom: 3px solid #333;

border-left: none;

}

🔸 Bordas arredondadas (formas criativas)

img {

border-radius: 50%; /* Círculo perfeito */

}

div {

border-radius: 20px 0 20px 0; /* Cantos alternados */

}

📘 Você também pode sobrepor elementos e criar “pílulas” com border-radius: 9999px.

🔸 Bordas com gradiente (técnica moderna)

CSS moderno permite criar bordas coloridas e com degradê, usando background-clip:

div {

border: 3px solid transparent;

border-radius: 12px;

background-origin: border-box;

background-clip: border-box;

}

💥 Resultado: uma borda multicolorida brilhante — muito usado em botões e cartões contemporâneos.

☁️ 2. Sombreamento com box-shadow

A propriedade box-shadow cria sombras externas e internas em qualquer caixa.

💡 Sintaxe:

box-shadow: deslocamentoX deslocamentoY desfoque espalhamento cor;

Exemplo:

div {

box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);

}

💬 Isso cria uma sombra que dá profundidade e realismo a boxes e botões.

📘 Exemplo detalhado:

.card {

background: white;

border-radius: 12px;

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

}

● 0 → eixo X

● 8px → eixo Y (distância vertical)

● 24px → desfoque suave

● rgba(0,0,0,0.1) → cor com transparência

🎨 Dica: sombras suaves com opacidade reduzida passam profissionalismo.

🔹 Sombra interna (inset)

div {

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

}

💡 Ideal para criar efeitos de profundidade ou moldura dentro da caixa.

✨ 3. Sombra em Textos (text-shadow)

Você também pode aplicar sombra diretamente em textos.

h1 {

color: #fff;

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

}

💬 Isso cria contraste e legibilidade quando o texto está sobre fundos coloridos ou imagens.

🔮 4. Filtros (Filters)

Filtros aplicam efeitos visuais diretamente em imagens e elementos — sem precisar de Photoshop!

💡 Exemplo:

img {

filter: grayscale(50%) brightness(120%) contrast(110%);

}

Outros efeitos possíveis:

Filtro Exemplo

blur(5px) → Embaça imagem

brightness(0.8) → Escurece

contrast(150%) → Aumenta contraste

saturate(200%) → Deixa mais colorido

sepia(70%) → Tom retrô / marrom

drop-shadow(5px 5px 5px gray) → Sombra detalhada em transparência

invert(100%) → Inverte as cores

💡 Você pode combiná-los em linha, separados por espaço.

🪄 5. Transições de Hover com Efeito Visual

CSS moderno permite efeitos suaves ao passar o mouse sobre elementos (sem JS).

button {

background-color: #0077ff;

color: white;

border: none;

padding: 12px 20px;

border-radius: 8px;

transition: all 0.3s ease;

}

button:hover {

transform: translateY(-3px);

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

}

💬 Isso dá um efeito de “flutuação” leve, muito usado em botões e cartões modernos.

🧩 6. Projeto Prático – Card Interativo com Sombra Flutuante

Agora, mãos à obra!
Você vai criar um card com bordas modernas, sombras e hover animado.

📄 index.html

<!DOCTYPE html>

<head>

<title>Card Interativo</title>

</head>

<body>

<h2>Lucas Ribeiro</h2>

<p>Desenvolvedor Front-End apaixonado por interfaces criativas e acessíveis.</p>

</div>

</body>

</html>

📄 style.css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

height: 100vh;

background: linear-gradient(135deg, #8ec5fc, #e0c3fc);

display: flex;

justify-content: center;

align-items: center;

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

}

.card {

background: white;

padding: 30px;

border-radius: 16px;

width: 300px;

text-align: center;

box-shadow: 0 12px 24px rgba(0,0,0,0.1);

transition: all 0.3s ease;

border: 3px solid transparent;

linear-gradient(45deg, #0077ff, #00ffcc);

background-origin: border-box;

background-clip: content-box, border-box;

}

.card:hover {

transform: translateY(-10px);

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

}

.card img {

width: 100px;

height: 100px;

border-radius: 50%;

margin-bottom: 15px;

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

}

.card h2 {

color: #0077ff;

font-size: 22px;

margin-bottom: 8px;

}

.card p {

font-size: 14px;

color: #555;

margin-bottom: 20px;

}

button {

background: linear-gradient(45deg, #0077ff, #00b4ff);

border: none;

color: #fff;

padding: 10px 20px;

border-radius: 8px;

cursor: pointer;

transition: 0.3s ease;

}

button:hover {

background: linear-gradient(45deg, #005fd4, #0099dd);

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

}

✨ Resultado:

● Um cartão com borda em degradê,

● Sombra suave que dá realismo,

● Efeito hover flutuante,

● E botão animado moderno — tudo 100% com CSS.

🧠 7. O Que Você Aprendeu Hoje

✔️ Criar bordas básicas e avançadas (incluindo gradiente);
✔️ Aplicar box-shadow para profundidade;
✔️ Usar text-shadow para destacar textos;
✔️ Manipular efeitos com filter;
✔️ Criar animações de hover com transições suaves;
✔️ Construir um card moderno com efeitos visuais profissionais.

🚀 Próxima Aula: Pseudo-classes e Pseudo-elementos

Na próxima aula você vai dominar o universo “invisível” do CSS:

● Criar estilos reativos com :hover, :focus, :active;

● Usar pseudo-elementos ::before e ::after para adicionar conteúdo e decoração sem HTML;

● Fazer animações sutis e efeitos interativos com apenas CSS;

● E construir um menu animado com pseudo-elementos criativos.

🎨 Layout e Posicionamento

💻 Aula 6 👉 Pseudo-Classes e Pseudo-Elementos.

🎯 Objetivos da Aula

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

● Aprender a utilizar :hover, :focus, :active, :nth-child e mais;

● Usar ::before e ::after para criar efeitos visuais sem alterar o HTML;

● Criar animações e transições usando pseudo-elementos;

● Construir um menu animado e elegante usando essas técnicas.

🧩 1. Pseudo-Classes: o comportamento dinâmico no CSS

As pseudo-classes indicam estados ou condições especiais de um elemento.
Exemplo: quando o mouse passa por cima (:hover), quando um campo está em foco (:focus), ou quando um link foi visitado (:visited).

Elas não criam novos elementos — apenas alteram o estilo dos existentes em situações específicas.

🔸 Principais pseudo-classes:

Pseudo-classe Descrição

:hover → Quando o mouse passa sobre o elemento

:active → Quando o elemento está sendo clicado

:focus → Quando o elemento (input, botão, etc.) está em foco

:visited → Quando um link já foi visitado

:first-child → Primeiro filho dentro de um contêiner

:last-child → Último filho dentro de um contêiner

:nth-child(n) → Seleciona o filho na posição n (ou padrões)

🎨 Exemplo Prático — Botão com estados diferentes:

button {

background-color: #0077ff;

color: white;

border: none;

padding: 12px 20px;

border-radius: 8px;

cursor: pointer;

transition: 0.3s;

}

button:hover {

background-color: #005fd4;

}

button:active {

transform: scale(0.95);

}

button:focus {

outline: 3px solid #00b4ff;

}

⚡ O botão ganha aparência clicável e profissional — brilhante no hover, com feedback visual ao clicar e foco claro.

🔸 Exemplo — Estilizando listas com nth-child

li:nth-child(odd) {

background-color: #f2f2f2;

}

li:nth-child(even) {

background-color: #e2e8ff;

}

💬 Isso alterna as cores de cada linha (muito usado em tabelas e listas de preços).

Você pode usar padrões dinâmicos, como:

li:nth-child(3n) {

color: #0077ff;

}

👉 Afeta todo terceiro item.

🪄 2. Pseudo-Elementos: criando o “CSS que desenha”

Os pseudo-elementos são diferentes:
Eles adicionam conteúdo “falso” (decorativo) antes ou depois de um elemento — perfeitos para ícones, destaques ou animações.

Os mais comuns são:

● ::before

● ::after

⚙️ Sintaxe:

h1::before {

content: "★ ";

color: gold;

}

h1::after {

content: " ★";

color: gold;

}

💡 content é obrigatório! Mesmo se for vazio, o pseudo-elemento precisa dele para existir.

Isso cria estrelas decorativas antes e depois do título sem alterar o HTML!

🔹 Espaçamentos e efeitos decorativos:

h2::after {

content: "";

display: block;

width: 50px;

height: 4px;

background-color: #0077ff;

margin: 8px auto;

border-radius: 2px;

}

💥 Esse código desenha uma linha colorida sob o título — usado em muitos sites profissionais.

🔧 3. Usando Pseudo-elementos para Design e Animação

Você pode usar ::before e ::after para adicionar camadas visuais, bordas animadas, sombreamentos, filtros e muito mais.

💎 Exemplo — Botão com brilho animado

button {

position: relative;

overflow: hidden;

background: #0077ff;

color: white;

border: none;

padding: 12px 24px;

border-radius: 8px;

font-weight: 600;

cursor: pointer;

}

button::before {

content: "";

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

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

transform: skewX(-20deg);

transition: left 0.4s;

}

button:hover::before {

left: 200%;

}

💥 Resultado: ao passar o mouse, uma faixa brilhante percorre o botão, como um reflexo de luz.

💬 4. Combinando Pseudo-Classes + Elementos

Você pode combinar ambos para criar comportamentos super ricos.

Exemplo — Subtítulo com linha animada:

h2 {

position: relative;

display: inline-block;

}

h2::after {

content: "";

position: absolute;

width: 0;

height: 3px;

bottom: 0;

left: 0;

background-color: #0077ff;

transition: width 0.3s;

}

h2:hover::after {

width: 100%;

}

💡 Aqui o ::after desenha uma linha que cresce sob o texto quando você passa o mouse — um efeito sublinhado animado minimalista e moderno.

🛠️ 5. Projeto Prático — Menu Animado com Pseudo-elementos

Vamos juntar tudo que aprendemos nesta aula num menu interativo estiloso.

📄 index.html

<!DOCTYPE html>

<head>

<title>Menu Animado</title>

</head>

<body>

<a href="#">Início</a>

<a href="#">Serviços</a>

<a href="#">Portfólio</a>

<a href="#">Contato</a>

</nav>

</body>

</html>

📄 style.css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

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

}

.menu {

display: flex;

gap: 40px;

}

.menu a {

position: relative;

color: white;

text-decoration: none;

font-size: 18px;

padding: 6px 0;

}

.menu a::after {

content: "";

position: absolute;

width: 0;

height: 2px;

bottom: 0;

left: 0;

background: white;

transition: width 0.3s ease;

}

.menu a:hover::after {

width: 100%;

}

.menu a:hover {

color: #222;

transition: color 0.3s;

}

💥 Resultado:

● Links com linha que se anima ao passar o mouse;

● Transição suave de cor no texto;

Menu moderno, sem precisar de JavaScript.

🎨 6. Técnicas Avançadas de Pseudo-elementos

Além de decorações, você pode usar pseudo-elementos para:

● Criar formas geométricas (::before com clip-path ou border-radius);

● Adicionar ícones via fonte ou Unicode;

● Gerar efeitos de sombra, destaque ou gradiente extra;

● Construir animações puramente visuais, como barras de progresso ou loading spinners.

Exemplo — Bolinhas pulsantes de carregamento:

.loader {

display: flex;

gap: 10px;

}

.loader div {

width: 14px;

height: 14px;

border-radius: 50%;

background: white;

animation: pulse 1.4s infinite ease-in-out;

}

.loader div:nth-child(2) { animation-delay: 0.2s; }

.loader div:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {

0%, 80%, 100% { transform: scale(0.8); opacity: 0.6; }

40% { transform: scale(1); opacity: 1; }

}

💡 É leve, acessível e feito com apenas CSS!

🧠 7. O Que Você Aprendeu Hoje

✔️ Diferença entre pseudo-classes (estado) e pseudo-elementos (decoração);
✔️ Usar :hover, :active, :focus e :nth-child;
✔️ Criar efeitos visuais com ::before e ::after;
✔️ Combinar comportamentos e estilos dinâmicos;
✔️ Montar menus e botões animados apenas com CSS.

💬 Próximo Módulo:

● Alinhar e distribuir elementos com facilidade;

● Criar layouts responsivos sem precisar de floats;

● Centralizar itens horizontal e verticalmente com poucas linhas;

● Construir um layout completo de página com Flexbox.

📚 Módulo 3 → Layout e Posicionamento.

💻 Aula 7: 👉 Flexbox: layouts responsivos modernos.

💻 Aula 8: 👉 CSS Grid: o sistema de layout completo.

💻 Aula 9: 👉 Alinhamento, espaçamento e dimensionamento dinâmico.

Módulo 3 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