Drop shadow

L'ombre portée (drop shadow en anglais) en CSS est un effet visuel appliqué à un élément d'une page web pour créer une apparence en relief ou en profondeur.

Elle simule l'effet d'une source de lumière derrière l'élément, projetant une ombre sur la surface sur laquelle l'élément est affiché.

Pour ajouter une ombre portée à un élément en utilisant CSS, vous pouvez utiliser la propriété box-shadow.

Voici un exemple de code CSS qui illustre comment ajouter une ombre portée à un élément :

.shadowed-element {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Dans cet exemple :

• 5px spécifie le décalage horizontal de l'ombre.
• 5px spécifie le décalage vertical de l'ombre.
• 10px spécifie le flou (l'étalement) de l'ombre.
• rgba(0, 0, 0, 0.5) définit la couleur de l'ombre. Dans ce cas, l'ombre est semi-transparente, avec une couleur noire (valeurs RVB) et une opacité de 0,5.