Comment ajouter une ombre sous une image en CSS ?
L'ajout d'une ombre sous une image peut donner un effet de profondeur et de réalisme à votre design. Heureusement, il est facile de le faire en CSS avec la propriété box-shadow
.
La propriété box-shadow
La propriété box-shadow
est utilisée pour ajouter des ombres autour d'un élément. Voici sa syntaxe :
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow
- détermine la position horizontale de l'ombrev-shadow
- détermine la position verticale de l'ombreblur
- détermine la quantité de flou de l'ombrespread
- détermine la taille de l'ombrecolor
- détermine la couleur de l'ombreinset
- spécifie que l'ombre doit être incluse à l'intérieur de l'élément plutôt que autour
Ajouter une ombre sous une image
Pour ajouter une ombre sous une image, il suffit d'appliquer la propriété box-shadow
à l'élément img
. Voici un exemple :
img {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
Cet exemple ajoute une ombre avec une position horizontale et verticale de 0px, un flou de 10px, une taille de 0px et une couleur de noir semi-transparente. Vous pouvez ajuster ces valeurs pour obtenir l'effet souhaité.
Il est important de noter que cette méthode ne fonctionne pas avec les images PNG avec transparence. Pour les images PNG, vous pouvez utiliser une astuce consistant à ajouter une div autour de l'image et appliquer l'ombre à cette div plutôt qu'à l'image elle-même. Voici un exemple :
<div class="image-shadow">
<img src="image.png" alt="" />
</div>
.image-shadow {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
Personnaliser l'ombre
Il existe de nombreuses façons de personnaliser l'ombre pour obtenir l'effet souhaité. Voici quelques exemples :
Modifier la couleur
Vous pouvez modifier la couleur de l'ombre en utilisant une autre valeur pour la propriété color
. Voici un exemple :
img {
box-shadow: 0px 0px 10px #ff0000;
}
Cet exemple ajoute une ombre rouge à l'image.
Modifier la taille
Vous pouvez modifier la taille de l'ombre en utilisant une autre valeur pour la propriété spread
. Voici un exemple :
img {
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
}
Cet exemple ajoute une ombre avec une taille de 5px autour de l'image.
Modifier la position
Vous pouvez modifier la position de l'ombre en utilisant d'autres valeurs pour les propriétés h-shadow
et v-shadow
. Voici un exemple :
img {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
Cet exemple ajoute une ombre avec une position horizontale de 5px et une position verticale de 5px.
Ajouter plusieurs ombres
Vous pouvez ajouter plusieurs ombres à un élément en utilisant des virgules pour séparer les valeurs. Voici un exemple :
img {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), 5px 5px 10px rgba(255, 0, 0, 0.5);
}
Cet exemple ajoute deux ombres à l'image : une noire et une rouge.
Conclusion
Ajouter une ombre sous une image en CSS est facile avec la propriété box-shadow
. En utilisant différentes valeurs pour les propriétés de cette propriété, vous pouvez personnaliser l'ombre pour obtenir l'effet souhaité. Gardez à l'esprit que cette méthode ne fonctionne pas avec les images PNG avec transparence, mais vous pouvez utiliser une astuce en ajoutant une div autour de l'image.
box-shadow - CSS : Feuilles de style en cascade - MDN Web Docs
developer.mozilla.org/fr/do...Comment Créer une Ombre Portée Pour une Image PNG - W3docs
fr.w3docs.com/snippets/css/...Ajouter des ombres aux éléments avec box-shadow en CSS
www.pierre-giraud.com/html-...Les ombrages en CSS3 - Alsacreations
www.alsacreations.com/tuto/...Comment mettre de l'ombre sur une image en CSS ?
www.synonyme-du-mot.com/les...Une ombre pour donner du relief en CSS - Xul.fr
www.xul.fr/css/ombre.phpEffet CSS d'arrondi et ombre portée sur une image - Bonbache
www.bonbache.fr/effet-css-d...Effet CSS d'arrondi et ombre portée sur une image - YouTube
www.youtube.com/watch?v=Mx8...Les ombres portées en CSS sur les bordures et sur les textes.
www.devenir-webmaster.com/V...Les ombres sont un moyen puissant pour ajouter du cachet à un design. Elles sont également très utiles pour créer des effets intéressants sur vos images.
CSS offre une variété d'options pour ajouter des ombres à vos images. Vous pouvez utiliser les propriétés box-shadow et text-shadow pour définir l'ombre de l'image. La syntaxe et les valeurs pour ces propriétés peuvent être un peu compliquées, mais elles sont très puissantes et vous permettent de créer des effets intéressants.
Les ombres peuvent ajouter de la profondeur et de la dimension à votre image. Elles sont parfaites pour créer des effets 3D ou donner à votre image un effet flottant. Elles peuvent même être utilisées pour créer des transitions intéressantes entre les différents éléments de votre page web.
En général, je recommande d'utiliser des ombres modérées pour éviter de surcharger l'image. Débutez avec des valeurs faibles et ajustez les paramètres jusqu'à ce que vous obteniez l'effet souhaité.
Personnellement, j'aime beaucoup utiliser les ombres pour mettre en valeur des images sur un site web et j'aime voir comment elles peuvent changer l'apparence et le design d'une page. J'ai récemment utilisé la propriété box-shadow pour ajouter une ombre sous une image sur un site web. Cela a donné à l'image un effet dynamique qui s'est bien intégré à la page globale.