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.