Der Markdown-Editor hat keine eingebaute Möglichkeit, Schatten zu Bildern hinzuzufügen. Der Workaround besteht darin, das HTML-Tag <img> mit der box-shadow CSS-Eigenschaft innerhalb des style Attributs zu verwenden, was der Markdown-Editor von Document360 korrekt darstellt.
Wann sollte man Bildschatten verwenden
- Featured Images oder Heldenbilder – ein dezenter Schatten hebt das Bild vom Papier ab und verleiht ihm visuelles Gewicht, sodass es auf einem weißen Hintergrund weniger flach wirkt.
- Screenshots mit weißem oder hellem Hintergrund – ohne Schatten kann ein Screenshot mit hellem Hintergrund auf die Seite übergehen. Ein Schatten bildet eine sichtbare Grenze.
- Dekorative oder Produktbilder – Schatten verleihen Bildern Tiefe und Feinschliff, die für visuelles Interesse statt für technische Anleitung dienen.
Benutze Schatten sparsam. Wenn man sie auf jedes Bild eines Artikels anwendet, entsteht visuelles Rauschen statt Betonung.
Diese Technik funktioniert nur im Markdown-Editor. Im WYSIWYG-Editor verwenden Sie stattdessen den Schatten-Schalter im Bildeinstellungspanel.
Verständnis der Box-Shadow-Eigenschaft
Die CSS-Eigenschaft box-shadow nimmt in dieser Reihenfolge drei Werte an:
| Wert | Was er kontrolliert | Beispiel |
|---|---|---|
| Horizontaler Offset | Wie weit der Schatten nach links (negativ) oder rechts (positiv) reicht) | 3px |
| Vertikaler Versatz | Wie weit der Schatten nach oben (negativ) oder nach unten (positiv) reicht | 3px |
| Unschärferadius | Wie scharf oder weich der Schattenrand erscheint (höher = weicher) | 3px |
| Farbe | Die Schattenfarbe – jeder CSS-Farbname oder Hex-Code | gray |
Kurze Referenz
Ersetze YOUR_IMAGE_URL, YOUR_ALT_TEXT, und die Schattenwerte durch deine Anforderungen.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
Um den Schatten anzupassen, passen Sie die drei Pixelwerte und den Farbnamen an:
<!-- 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;">
Grau ist die am häufigsten verwendete Schattenfarbe, da sie sowohl auf hellen als auch auf dunklen Hintergründen funktioniert. Du kannst sie durch jeden gültigen CSS-Farbnamen oder Hex-Code ersetzen gray , der zu deinem Design passt.
Wie man einen Schatten zu einem Bild in Markdown hinzufügt
- Öffnen Sie den gewünschten Artikel im Knowledge Base-Portal.
- Füge den untenstehenden Ausschnitt an die Stelle ein, an der das Bild erscheinen soll.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
- Ersetzen Sie
YOUR_IMAGE_URLsie durch die URL Ihres Bildes. - Ersetzen
YOUR_ALT_TEXTSie sie durch eine kurze Beschreibung des Bildes zur Zugänglichkeit. - Passen Sie die Schattenwerte bei Bedarf an – siehe oben die Kasten-Schatten-Referenztabelle .
Ergebnis
Ohne Schatten
Mit Schatten
