Bordas, Sombreamentos e Efeitos Visuais. 🌴 TRILHA CSS 🎨 Etapa 05

Academy Code Christ 0

   Seja muito bem-vindo à Academy Code Christ!


🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🎨 Etapa 05 


O que você vai aprender nesta aula?


Nessa 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.

🧱 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-image: linear-gradient(45deg, #0077ff, #00ffcc);

  background-origin: border-box;

  background-clip: border-box;

}

 

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

contemporâneos.

☁️ 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.

✨ 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.

🔮 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.

🪄 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.

📘 Para um melhor Aprendizado               🎯 Pratique com exercícios, desafios e projetos

🧩 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>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Card Interativo</title>

  <link href="https://fonts.googleapis.com/css2?family=Poppins:

wght@400;600&display=swap"

rel="stylesheet">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="card">

<img src="foto.jpg" alt="Foto de perfil">

<h2>Lucas Ribeiro</h2>

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

<button>Ver Mais</button>

  </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;

  background-image: linear-gradient(white, white),

                    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.



📚 Continue aprendendo CSS:


🎨 Etapa 1 👉  Introdução ao CSS

🎨 Etapa 3 👉 Box Model, Display e Posicionamento

🎨 Etapa 4 👉 Tipografia, Cores eFundos Avançados

🎨 Etapa 5 👉 Você está nessa Etapa

🎨 Etapa 6 👉 Pseudo-Classes e Pseudo-Elementos

🎨 Etapa 7 👉 Flexbox: Layouts Flexíveis e Responsivos

🎨 Etapa 8 👉 CSS Grid: Layouts de Grade Avançados

🎨 Etapa 9 👉 Responsividade e Media Queries

🎨 Etapa 10 👉 Transições e Animações no CSS

🎨 Etapa 11 👉 Gradientes, Sombras e Estilo Translúcido

🎨 Etapa 12 👉 Variáveis e Funções (CSS Custom Properties)

🎨 Etapa 13 👉 Layout Responsivo Completo com Grid, Flexbox e Media Queries

🎨 Etapa 14 👉 Boas Práticas, e Estrutura Profissional de Projeto CSS

🎨 Etapa 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS




Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 



Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem