Comment créer un effet d'ombre autour d'une image en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-05-12 15:38:04

Question

Comment faire pour créer un effet d'ombre autour d'une image en HTML et CSS ?

Réponse

Pour créer un effet d'ombre autour d'une image en HTML et CSS, vous pouvez utiliser la fonction CSS drop-shadow().

Cette fonction contient 4 paramètres :

La valeur horizontale de l'ombre.
La valeur verticale de l'ombre.
L'a longueur de l'effet d'ombre.
La couleur de l'effet d'ombre.

Voici un exemple où a été créée une CLASS CSS nommée ombre_image, elle a été appliquée à une balise image.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment créer un effet d'ombre autour d'une image en HTML et CSS ?</title>
<style>
.ombre_image {
filter: drop-shadow(0 0 0.8rem black);
}
</style>
</head>  
<body> 
<img src="https://www.collaborativejob.com/os.jpg" alt="Image avec une ombre portée" class="ombre_image">
</body>
</body>
</html>

Vous trouverez d'avantage d'information, sur la manière d'ajouter un effet d'ombre autour d'une image, via cette page du site de Mozilla.