Modelo CSS: Layout de Cartão (cantos arredondados + sombra)

📝 Uso

Este modelo é útil para apresentar caixas no estilo cartão, como cartões de produto ou perfis. Ideal para iniciantes aplicarem um design elegante com facilidade.

📘 Explicação

border-radius cria cantos arredondados e box-shadow adiciona uma sombra sutil para dar profundidade. É um estilo simples, mas muito reutilizável.

✅ Demonstração

Este é um cartão com cantos arredondados e sombra.

📄 Código (parcial)

<style>
.card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  background-color: #ffffff;
  max-width: 400px;
  margin: 1rem auto;
}
</style>

<div class="card">
  Este é um cartão.
</div>

📦 Código (HTML completo)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de Layout de Cartão</title>
  <style>
    .card {
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      padding: 1.5rem;
      background-color: #ffffff;
      max-width: 400px;
      margin: 1rem auto;
    }
  </style>
</head>
<body>
  <div class="card">
    Este é um cartão com cantos arredondados e sombra.
  </div>
</body>
</html>

Copiado!

🎨 Variações de Design de Cartões

Aqui estão algumas maneiras de aprimorar ainda mais um design básico de cartão. Ajustando o valor de box-shadow, é possível criar um efeito mais tridimensional. Por exemplo, box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); proporciona uma sombra mais forte.

🌈 Cores e Efeitos de Hover

Se quiser adicionar cor ao cartão, altere a propriedade background-color. Além disso, ao utilizar .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }, você pode criar um efeito de elevação ao passar o mouse.

📱 Suporte Responsivo

Para ajustar a largura do cartão conforme o tamanho da tela, utilize width: 90%; em vez de max-width. Combinando com media queries, como @media (min-width: 768px) { .card { width: 50%; } }, é possível criar um layout de duas colunas em telas maiores.

O posicionamento do conteúdo dentro do cartão também é essencial. Adicionando display: flex; e flex-direction: column; você consegue controlar a disposição dos elementos internos com mais flexibilidade. Isso é especialmente útil em cartões com botões ou imagens.

Este design de cartão pode ser usado em várias situações, como listas de produtos, miniaturas de artigos de blog ou widgets de painéis administrativos. Ajustar o equilíbrio entre sombra e bordas arredondadas permite criar um design que se harmoniza com o estilo geral do seu site.