Plantilla CSS: Diseño de Tarjeta (bordes redondeados + sombra)

📝 Usos

Esta plantilla es útil para presentar secciones como tarjetas de producto o perfiles. Ideal para principiantes que quieren aplicar un diseño elegante fácilmente.

📘 Explicación

border-radius redondea los bordes, y box-shadow agrega una sombra sutil para dar profundidad. Es un estilo simple pero muy reutilizable.

✅ Demostración

Esta es una tarjeta con bordes redondeados y 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">
  Esta es una tarjeta.
</div>

📦 Código (HTML completo)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de tarjeta CSS</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">
    Esta es una tarjeta con bordes redondeados y sombra.
  </div>
</body>
</html>

¡Copiado!

🎨 Variaciones en el Diseño de Tarjetas

Aquí te presentamos formas de mejorar aún más un diseño de tarjeta básico. Ajustando el valor de box-shadow, puedes lograr un efecto más tridimensional. Por ejemplo, box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); genera una sombra más pronunciada.

🌈 Colores y Efectos Hover

Si deseas añadir color a una tarjeta, cambia el background-color. Además, escribiendo .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } puedes añadir un efecto de elevación al pasar el ratón por encima.

📱 Adaptabilidad Responsiva

Para ajustar el ancho de la tarjeta según el tamaño de la pantalla, usa width: 90%; en lugar de max-width. Combinando con media queries como @media (min-width: 768px) { .card { width: 50%; } }, puedes crear un diseño de dos columnas en pantallas grandes.

La disposición del contenido dentro de la tarjeta también es importante. Al añadir display: flex; y flex-direction: column;, puedes controlar los elementos internos con mayor flexibilidad. Esto es especialmente útil en tarjetas que contienen botones o imágenes.

Este diseño de tarjeta se puede aplicar en múltiples contextos como listados de productos, miniaturas de entradas de blog o widgets de paneles de control. Ajustar el equilibrio entre sombra y bordes redondeados permite lograr un diseño coherente con el estilo general del sitio web.