L’éditeur Markdown n’a pas de moyen intégré d’ajouter des ombres aux images. La solution consiste à utiliser la balise HTML <img> avec la box-shadow propriété CSS à l’intérieur de l’attribut style , que l’éditeur Markdown de Document360 affiche correctement.
Quand utiliser les ombres d’image
- Images en vedette ou images héroïques — une ombre subtile soulève l’image de la page et lui donne un poids visuel, la rendant moins plate sur un fond blanc.
- Les captures d’écran avec des fonds blancs ou clairs — sans ombre, une capture d’écran avec un fond clair peut s’infiltrer sur la page. Une ombre crée une frontière visible.
- Images décoratives ou de produits — les ombres ajoutent profondeur et raffinement aux images utilisées pour l’intérêt visuel plutôt que pour l’enseignement technique.
Utilisez les ombres avec parcimonie. Les appliquer à chaque image d’un article crée un bruit visuel plutôt que de l’accent.
Cette technique ne fonctionne que dans l’éditeur Markdown. Dans l’éditeur WYSIWYG, utilisez plutôt le bouton ombre dans le panneau des paramètres d’image.
Comprendre la propriété de l’ombre boîte
La box-shadow propriété CSS prend trois valeurs dans cet ordre :
| Valeur | Ce qu’il contrôle | Exemple |
|---|---|---|
| Décalage horizontal | Jusqu’où l’ombre s’étend-elle vers la gauche (négative) ou la droite (positive) | 3px |
| Décalage vertical | Jusqu’où l’ombre s’étend-elle vers le haut (négatif) ou vers le bas (positif) | 3px |
| Rayon de flou | À quel point le bord de l’ombre paraît net ou doux (plus haut = plus doux) | 3px |
| Couleur | La couleur de l’ombre — tout nom de couleur CSS ou code hexadécimal | gray |
Petite référence
Remplacez YOUR_IMAGE_URL, YOUR_ALT_TEXT, et les valeurs d’ombre par vos exigences.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
Pour personnaliser l’ombre, ajustez les valeurs des trois pixels et le nom de la couleur :
<!-- 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;">
Le gris est la couleur d’ombre la plus couramment utilisée car elle s’applique aussi bien aux fonds clairs qu’à l’obscurité. Vous pouvez remplacer gray par n’importe quel nom de couleur CSS ou code hexadécimal valide pour correspondre à votre design.
Comment ajouter une ombre à une image dans Markdown
- Ouvrez l’article souhaité dans le portail de la Base de connaissances.
- Collez l’extrait ci-dessous à l’endroit où vous souhaitez que l’image apparaisse.
<img src="YOUR_IMAGE_URL" alt="YOUR_ALT_TEXT" style="box-shadow: 3px 3px 3px gray;">
- Remplacez-le
YOUR_IMAGE_URLpar l’URL de votre image. - Remplacez-le
YOUR_ALT_TEXTpar une courte description de l’image pour plus d’accessibilité. - Ajustez les valeurs de l’ombre si nécessaire — voir le tableau de référence des ombres boîte ci-dessus.
Conséquences
Sans ombre
Avec de l’ombre
