La propriété box-shadow en CSS constitue un mécanisme efficace permettant aux développeurs d'introduire de la profondeur et de la dimension aux éléments HTML. En incorporant des ombres dans les éléments, on peut améliorer le réalisme et l'attractivité visuelle de l'interface utilisateur. Cet article approfondira les principes fondamentaux de box-shadow et proposera des exemples pour vous aider à maîtriser son application.

Comprendre les bases

La propriété box-shadow se compose de plusieurs valeurs qui définissent la manière dont l'ombre apparaîtra. Voici la syntaxe de base :

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x : Ce paramètre définit le déplacement horizontal de l'ombre. Les valeurs positives déplacent l'ombre vers la droite, les valeurs négatives la déplacent vers la gauche.
• offset-y : Ce paramètre indique le déplacement vertical de l'ombre. Les valeurs positives déplacent l'ombre vers le bas, les valeurs négatives l'élèvent.
• rayon de flou (facultatif) : Ce paramètre régule la douceur de l'ombre. Une valeur plus élevée entraîne une ombre plus diffuse. Si ce paramètre n'est pas spécifié, la valeur par défaut est 0, ce qui produit une ombre distincte.
• spread-radius (facultatif) : Ce paramètre affecte les dimensions de l'ombre. Les valeurs positives augmentent la taille de l'ombre, les valeurs négatives la réduisent.
• color : Cet attribut définit la couleur de l'ombre. Il peut s'agir de n'importe quelle représentation de couleur CSS valide, telle que #000, rgba(0,0,0,0.5) ou hsl(0, 0%, 50%).

Exemple : Ombre de boîte de base

Voyons un exemple simple d'ombre de boîte appliquée à un bouton :

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Dans ce cas, l'ombre est décalée de 5px horizontalement et verticalement, a un rayon de flou de 10px et est colorée en noir avec 0,3 de opacité.

Exemple : Incrustation d'ombres

box-shadow prend également en charge le mot-clé inset, qui place l'ombre à l'intérieur de l'élément, lui donnant un effet en retrait.

div {
  box-shadow: inset 0 0 10px #000;
}

Ici, l'ombre est placée à l'intérieur du div, créant un effet comme si le contenu était poussé vers l'intérieur.

Conseils avancés

• Vous avez la possibilité de créer plusieurs ombres en délimitant chaque spécification box-shadow par une virgule. Cette technique permet de créer des effets d’ombres complexes et superposés.

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• Les effets d'ombre sont fréquemment utilisés pour produire des interactions de survol, améliorant ainsi l'interactivité des boutons ou des cartes.

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

Pour ceux qui préfèrent une approche plus visuelle, consultez le générateur CSS Box-Shadow. Cet outil vous permet de créer des effets d'ombre de boîte personnalisés sans effort, sans écrire de code ni enregistrer de préréglages.