El editor Markdown no tiene una forma incorporada de añadir sombras a las imágenes. La solución es usar la etiqueta HTML <img> con la box-shadow propiedad CSS dentro del style atributo, que el editor Markdown de Document360 renderiza correctamente.
Cuándo usar sombras de imagen
- Imágenes destacadas o imágenes de héroes — una sombra sutil eleva la imagen de la página y le da peso visual, haciendo que se sienta menos plana sobre un fondo blanco.
- Capturas de pantalla con fondos blancos o claros — sin sombra, una captura con fondo claro puede filtrarse en la página. Una sombra crea un límite visible.
- Imágenes decorativas o de producto — las sombras aportan profundidad y pulido a las imágenes utilizadas para interés visual más que para instrucción técnica.
Usa las sombras con moderación. Aplicarlas a cada imagen de un artículo crea ruido visual en lugar de énfasis.
Esta técnica solo funciona en el editor Markdown. En el editor WYSIWYG, usa el interruptor de sombra en el panel de configuración de imagen.
Comprensión de la propiedad de la sombra de caja
La box-shadow propiedad CSS toma tres valores en este orden:
| Valor | Lo que controla | Ejemplo |
|---|---|---|
| Desplazamiento horizontal | ¿Hasta dónde se extiende la sombra hacia la izquierda (negativo) o la derecha (positivo) | 3px |
| Desplazamiento vertical | ¿Hasta dónde se extiende la sombra hacia arriba (negativo) o hacia abajo (positivo) | 3px |
| Radio de desenfoque | Qué tan nítido o suave se ve el borde de la sombra (más alto = más suave) | 3px |
| Color | El color de sombra — cualquier nombre de color CSS o código hexadecimal | gray |
Referencia rápida
Sustituye YOUR_IMAGE_URL, YOUR_ALT_TEXT, y los valores de sombra por tus requisitos.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
Para personalizar la sombra, ajusta los tres valores de píxeles y el nombre del color:
<!-- Larger, softer shadow -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 5px 5px 10px #999999;">
<!-- No horizontal offset, tight shadow below only -->
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 0px 4px 4px gray;">
El gris es el color de sombra más utilizado porque funciona tanto contra fondos claros como oscuros. Puedes reemplazarlo gray por cualquier nombre de color CSS válido o código hexadecimal para que coincida con tu diseño.
Cómo añadir una sombra a una imagen en Markdown
- Abre el artículo deseado en el portal de la Base de Conocimiento.
- Pega el fragmento de abajo en la ubicación donde quieres que aparezca la imagen.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
- Sustituye
YOUR_IMAGE_URLpor la URL de tu imagen. - Sustituye
YOUR_ALT_TEXTpor una breve descripción de la imagen para mayor accesibilidad. - Ajusta los valores de sombra si es necesario — consulta la tabla de referencia de sombras en caja arriba.
Resultado
Sin sombra
Con sombra
