O editor Markdown não tem uma forma embutida de adicionar sombras às imagens. A solução alternativa é usar a tag HTML <img> com a box-shadow propriedade CSS dentro do style atributo, que o editor Markdown do Document360 renderiza corretamente.
Quando usar sombras de imagem
- Imagens em destaque ou imagens de herói — uma sombra sutil eleva a imagem da página e dá peso visual, fazendo com que pareça menos plana contra um fundo branco.
- Capturas de tela com fundo branco ou claro — sem sombra, uma captura de tela com fundo claro pode se espalhar pela página. Uma sombra cria um limite visível.
- Imagens decorativas ou de produto — as sombras adicionam profundidade e polimento às imagens usadas para interesse visual, em vez de instrução técnica.
Use sombras com moderação. Aplicá-las a cada imagem de um artigo cria ruído visual em vez de ênfase.
Essa técnica só funciona no editor Markdown. No editor WYSIWYG, use a opção de alternar sombra no painel de configurações de imagem.
Entendendo a propriedade da sombra da caixa
A box-shadow propriedade CSS assume três valores nesta ordem:
| Valor | O que ele controla | Exemplo |
|---|---|---|
| Deslocamento horizontal | Até onde a sombra se estende para a esquerda (negativa) ou para a direita (positiva) | 3px |
| Deslocamento vertical | Até onde a sombra se estende para cima (negativo) ou para baixo (positivo) | 3px |
| Raio de desfoque | Quão nítida ou macia a borda da sombra parece (mais alta = mais suave) | 3px |
| Cor | A cor da sombra — qualquer nome de cor CSS ou código hexadecimal | gray |
Referência rápida
Substitua YOUR_IMAGE_URL, YOUR_ALT_TEXT, e os valores sombra pelos seus requisitos.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
Para personalizar a sombra, ajuste os três valores de pixel e o nome da cor:
<!-- 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;">
O cinza é a cor de sombra mais comumente usada porque funciona tanto contra fundos claros quanto escuros. Você pode substituir gray por qualquer nome de cor CSS válido ou código hexadecimal para combinar com seu design.
Como adicionar uma sombra a uma imagem no Markdown
- Abra o artigo desejado no portal da Base de Conhecimento.
- Cole o trecho abaixo no local onde você quer que a imagem apareça.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
- Substitua
YOUR_IMAGE_URLpela URL da sua imagem. - Substitua
YOUR_ALT_TEXTpor uma breve descrição da imagem para maior acessibilidade. - Ajuste os valores das sombras se necessário — veja a tabela de referência de sombra de caixa acima.
Desfecho
Sem sombra
Com sombra
