Con muy pocas propiedades puedes pasar de una caja plana a una tarjeta con profundidad, una foto con tratamiento de color o un botón con carácter. Esta página es un repaso práctico de los "acabados" de CSS: pruébalo todo en las DevTools mientras lees.

.portada {
  background-image: url("../img/estudio.webp");
  background-size: cover;        /* cubre toda la caja, recortando si hace falta */
  background-position: center;   /* qué parte se ve al recortar */
  background-repeat: no-repeat;
  min-height: 60vh;
}

• cover llena la caja (puede recortar); contain muestra la imagen entera (puede dejar huecos).
• Se pueden superponer varias capas separadas por comas; la primera queda encima. Truco clásico para que se lea el texto sobre una foto:

.portada {
  background:
    linear-gradient(rgb(0 0 0 / 55%), rgb(0 0 0 / 55%)),   /* velo oscuro */
    url("../img/estudio.webp") center / cover no-repeat;
  color: white;
}

⚠️ Atención. Una imagen de fondo es decoración: los lectores de pantalla no la anuncian. Si la imagen aporta información (una obra, un producto), va en el HTML con <img> y su alt.

Para imágenes en el HTML, object-fit: cover hace lo mismo que background-size: cover: la foto rellena su caja sin deformarse. Es imprescindible en galerías con fotos de proporciones distintas.

.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.tarjeta {
  border: 1px solid hsl(220 15% 85%);   /* grosor, estilo, color */
  border-radius: 12px;                  /* esquinas redondeadas */
}
.avatar  { border-radius: 50%; }        /* círculo (si la caja es cuadrada) */
.pastilla { border-radius: 999px; }     /* botón en forma de cápsula */
.nota    { border-left: 4px solid var(--color-acento); }   /* solo un lado */

Estilos de borde: solid, dashed, dotted, double… Y para marcar el foco de teclado usa outline (no ocupa espacio ni mueve el diseño):

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 3px;
}

box-shadow da profundidad a las cajas. Sus valores son: desplazamiento horizontal, vertical, desenfoque, extensión y color.

.tarjeta       { box-shadow: 0 2px 8px rgb(0 0 0 / 12%); }
.tarjeta:hover { box-shadow: 0 12px 24px rgb(0 0 0 / 18%); }
.hundido       { box-shadow: inset 0 2px 4px rgb(0 0 0 / 20%); }   /* sombra interior */

• Las sombras realistas son suaves (color con transparencia, nunca negro puro) y caen hacia abajo, como con una luz cenital.
• Se pueden encadenar varias sombras separadas por comas para un efecto más natural.
• Para texto, text-shadow: 0 2px 4px rgb(0 0 0 / 40%). Úsala con moderación: una sombra no arregla un contraste insuficiente.

filter aplica efectos de imagen a cualquier elemento, como en un editor de fotos:

.foto-gris       { filter: grayscale(1); }
.foto-gris:hover { filter: grayscale(0); }            /* recupera el color al pasar */
.foto-duotono    { filter: grayscale(1) sepia(0.6) hue-rotate(180deg); }
.fondo-difuso    { filter: blur(6px); }
.logo            { filter: drop-shadow(0 4px 6px rgb(0 0 0 / 30%)); }  /* sigue la silueta de un PNG o SVG */

Y backdrop-filter desenfoca lo que hay detrás de un elemento semitransparente (el efecto "vidrio esmerilado" de muchas interfaces):

.barra {
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(12px);
}

mix-blend-mode funciona como los modos de fusión de Photoshop (multiply, screen, overlay…): muy útil en carteles y portadas.

Crea una tarjeta de proyecto para tu portfolio:

1. Imagen con aspect-ratio: 4 / 3 y object-fit: cover, en escala de grises que pasa a color al pasar el ratón (filter + transition: filter .3s).
2. Caja con border-radius: 12px, borde fino y una sombra suave que crece en :hover.
3. Una etiqueta de categoría en forma de pastilla (border-radius: 999px).
4. Foco de teclado visible con outline en el enlace de la tarjeta.

• Poner imágenes importantes como fondo: no tienen texto alternativo.
• Sombras negras y duras (0 0 10px black): parecen de los años 2000. Usa transparencia.
• border-radius: 50% en una caja rectangular da un óvalo, no un círculo.
• Quitar el outline del foco (outline: none) sin poner otro indicador: la web deja de poder usarse con teclado.
• Abusar de blur y backdrop-filter: son costosos en móviles antiguos.