Sombras y Bordes

Domina sombras y bordes en CSS con una guía clara y práctica. Aprenderás a combinar box-shadow, text-shadow y border-radius para crear contenedores y textos más atractivos, con trucos útiles como usar el inspector del navegador y evitar errores comunes en la sintaxis.

¿Cómo preparar estilos base para contenedores en CSS?

Antes de aplicar sombras y bordes, conviene definir estilos consistentes para los elementos que usarás. Aquí se trabaja con div y la etiqueta p para que se comporten como tarjetas simples.

• Usa display: inline-block para que, si hay espacio, se coloquen en línea.
• Define padding y margin para separar contenido y elementos.
• Fija background: white para evitar transparencias indeseadas.
• Limita el encogimiento con min-width: 100px.
• Centra el texto con text-align: center.

div, p {
  display: inline-block;
  padding: 20px;
  margin: 10px;
  background: #fff;
  min-width: 100px;
  text-align: center;
}

¿Qué conceptos clave aplicas aquí?

• display: inline-block: coloca cajas en línea respetando dimensiones.
• padding y margin: espaciado interno y externo.
• background: buena práctica para visibilidad consistente del contenedor.
• min-width: evita que el contenido colapse más allá de un mínimo.
• text-align: center: alinea el texto al centro del contenedor.

¿Cómo aplicar y ajustar box-shadow e inset?

La sombra de caja agrega profundidad a contenedores. Se compone de desplazamiento horizontal, desplazamiento vertical, difuminado (blur), expansión (spread) y color. Un error común: no se usan comas entre valores de box-shadow.

• Define primero una sombra simple con desplazamientos y color.
• Usa el inspector del navegador para debuggear y ajustar en vivo.
• Ajusta blur para difuminar y spread para expandir la sombra.
• Aplica inset si deseas una sombra interna.

/* Sombra externa simple */
.shadow-simple {
  box-shadow: 5px 5px gray;
}

• Si necesitas una sombra interna, antepone inset y agrega el difuminado.

/* Sombra interna (inset) con difuminado */
.shadow-inset {
  box-shadow: inset 0 0 10px gray;
}

¿Qué ajustes hacer con el inspector del navegador?

• Arrastra el widget de sombras para explorar X e Y.
• Incrementa blur para una sombra más realista.
• Modera spread para evitar bordes exagerados.
• Copia los valores finales y pégalos en tu CSS.

¿Cómo crear sombras de texto y bordes redondeados efectivos?

El texto también puede beneficiarse de una sombra sutil. Y con bordes redondeados, tus contenedores se sienten más amables y modernos, ideales para “tarjetas”.

¿Qué ajustes mejoran una text-shadow legible?

• Usa desplazamientos moderados para no perder legibilidad.
• Aplica un blur equilibrado para suavizar sin deformar.
• Mantén un color gris tenue para no competir con el contenido.

/* Sombra de texto sutil */
.text-shadow {
  text-shadow: 2px 2px 5px gray;
}

¿Cómo redondear bordes con border-radius?

• Define un borde discreto y redondea esquinas.
• Combina border-radius con box-shadow para un efecto de tarjeta.

/* Tarjeta con borde y esquinas suaves */
.radius-small {
  border: 2px solid #333;
  border-radius: 5px;
}

• Para lograr un círculo (ideal para avatares), usa border-radius: 50% y define ancho y alto iguales.

/* Convertir en círculo */
.radius-small {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

• Si prefieres esquinas más marcadas, cambia el radio a 15px.

/* Esquinas más redondeadas */
.radius-small {
  border-radius: 15px;
}

¿Con qué combinaciones de box-shadow, text-shadow y border-radius te funciona mejor el diseño de tus tarjetas? Comparte ideas y dudas en los comentarios.