De Markdown-editor heeft geen ingebouwde manier om schaduwen aan afbeeldingen toe te voegen. De oplossing is om de HTML-tag <img> te gebruiken met de box-shadow CSS-eigenschap binnen het style attribuut, die door de Markdown-editor van Document360 correct wordt weergegeven.
Wanneer je beeldschaduwen moet gebruiken
- Uitgelichte afbeeldingen of heldenbeelden — een subtiele schaduw tilt de afbeelding van de pagina en geeft het visuele gewicht, waardoor het minder plat aanvoelt tegen een witte achtergrond.
- Screenshots met witte of lichte achtergronden — zonder schaduw kan een screenshot met een lichte achtergrond in de pagina overgaan. Een schaduw creëert een zichtbare grens.
- Decoratieve of productafbeeldingen — schaduwen geven diepte en afwerking aan beelden die voor visuele interesse worden gebruikt in plaats van voor technische instructie.
Gebruik schaduwen spaarzaam. Het toepassen ervan op elke afbeelding in een artikel creëert visuele ruis in plaats van nadruk.
Deze techniek werkt alleen in de Markdown-editor. Gebruik in de WYSIWYG-editor in plaats daarvan de schaduwschakelaar in het beeldinstellingenpaneel.
Inzicht in de box-shadow eigenschap
De box-shadow CSS-eigenschap neemt drie waarden aan in deze volgorde:
| Waarde | Wat het controleert | Voorbeeld |
|---|---|---|
| Horizontale offset | Hoe ver de schaduw naar links (negatief) of rechts (positief) reikt? | 3px |
| Verticale offset | Hoe ver de schaduw omhoog reikt (negatief) of omlaag (positief) | 3px |
| Vervagingsstraal | Hoe scherp of zacht de schaduwrand eruitziet (hoger = zachter) | 3px |
| Kleur | De schaduwkleur — elke CSS-kleurnaam of hex-code | gray |
Snelle referentie
Vervang YOUR_IMAGE_URL, YOUR_ALT_TEXT, en de schaduwwaarden door je vereisten.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
Om de schaduw aan te passen, pas je de drie pixelwaarden en de kleurnaam aan:
<!-- 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;">
Grijs is de meest gebruikte schaduwkleur omdat het werkt tegen zowel lichte als donkere achtergronden. Je kunt vervangen gray door elke geldige CSS-kleurnaam of hexcode die bij je ontwerp past.
Hoe voeg je een schaduw toe aan een afbeelding in Markdown
- Open het gewenste artikel in het Knowledge Base-portaal.
- Plak het fragment hieronder op de plek waar je wilt dat de afbeelding verschijnt.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
- Vervang
YOUR_IMAGE_URLdoor de URL van je afbeelding. - Vervang
YOUR_ALT_TEXThet door een korte beschrijving van de afbeelding voor toegankelijkheid. - Pas de schaduwwaarden aan indien nodig — zie de referentietabel van de doos-schaduw hierboven.
Uitkomst
Zonder schaduw
Met schaduw
