Bordas básicas e sombreamentos no css
Bem-vindo(a) ao post no blog.
Nesse Post 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.
Comentários
Postar um comentário